import React, { useEffect } from 'react';
import dayjs from 'dayjs';
import { Card, Form, Input, Radio, Select } from 'antd';
import SendTimeSet from '@/pages/weComTask/components/sendTimeSet';
import '../../../../../businessPlan/create/global.less'
import FilterUser from '@/pages/weComTask/components/filterUser';
import { DefaultOptionType } from 'antd/es/select';
import SelectCorpUser from '@/pages/weComTask/page/corpUserManage/selectCorpUser';

interface Props {
    strategyDTO: { [x: string]: any }
    corpList: DefaultOptionType[]
}

const PreviewStrategy: React.FC<Props> = ({ strategyDTO, corpList }) => {

    /**************************************/
    const [form] = Form.useForm();
    const strategyList = Form.useWatch('strategyList', form)
    /**************************************/

    useEffect(() => {
        if (strategyDTO && Object.keys(strategyDTO).length) {
            const data = {
                ...strategyDTO, strategyList: strategyDTO?.strategyList?.map(item => {
                    const { sendTime, startTime, endTime, sendDay, timeRepeatType } = item
                    if (timeRepeatType === 'TIME_TYPE_SINGLE_PLACE') {
                        const data = {
                            ...item,
                            timeRepeatType,
                            sendDay: sendDay ? dayjs(sendDay + ' ' + sendTime) : undefined
                        }
                        delete data?.sendTime
                        return data
                    }
                    return {
                        ...item,
                        timeRepeatType,
                        sendTime: sendTime ? dayjs('2025-04-25 ' + sendTime) : undefined,
                        startTime: startTime ? dayjs(startTime) : undefined,
                        endTime: endTime ? dayjs(endTime) : undefined,
                        sendDay: sendDay ? dayjs(sendDay) : undefined
                    }
                })
            }
            form.setFieldsValue(data)
        }
    }, [strategyDTO])

    return <Form
        form={form}
        name="newGroupChatStrategyShow"
        labelAlign='left'
        labelCol={{ span: 5 }}
        colon={false}
        preserve={true}
    >
        <Card title={<strong>基础信息配置</strong>} style={{ background: '#fff', marginBottom: 10 }} id='basicInfo'>
            <div className='block_tm'>
                <Form.Item label={<strong>任务名称</strong>} name="groupSendName" rules={[{ required: true, message: '请输入任务名称!' }]}>
                    <Input placeholder="请输入任务名称" />
                </Form.Item>
            </div>
        </Card>
        <Form.List name="strategyList">
            {(fields) => (
                <>
                    {fields.map(({ key, name, ...restField }, index) => {
                        const timeRepeatType = strategyList?.[index]?.timeRepeatType
                        const sendData = strategyList?.[index]?.sendData

                        return <Card
                            key={key}
                            title={<strong>策略{index + 1} 配置</strong>}
                            style={{ background: '#fff', marginBottom: 10 }}
                            id={`strategy_${index + 1}`}
                        >
                            <div className='block_tm'>
                                <Form.Item
                                    {...restField}
                                    name={[name, 'strategyName']}
                                    label={<strong>策略名称</strong>}
                                >
                                    <Input placeholder='请输入策略名称' />
                                </Form.Item>
                                <SendTimeSet isShow active='all' form={form} restField={restField} name={name} timeRepeatType={timeRepeatType} />
                                <Form.List name={[name, 'sendData']}>
                                    {(fields) => (
                                        <>
                                            {fields.map(({ key, name, ...restField }, i) => {
                                                const chatCorpId = sendData?.[i]?.chatCorpId
                                                const robotCorpId = sendData?.[i]?.robotCorpId
                                                return <Card
                                                    key={i}
                                                    title={<strong>策略{index + 1} 发送群对象{i + 1} 配置</strong>}
                                                    style={{ background: '#fff', marginBottom: 10 }}
                                                >
                                                    <Form.Item {...restField} label={<strong>发送群对象名称</strong>} name={[name, 'sendGroupName']}>
                                                        <Input placeholder="请输入发送群对象名称" />
                                                    </Form.Item>
                                                    <Form.Item
                                                        {...restField}
                                                        label={<strong>机器人主体</strong>}
                                                        name={[name, 'robotCorpId']}
                                                    >
                                                        <Select
                                                            showSearch
                                                            allowClear
                                                            placeholder="选择机器人主体"
                                                            filterOption={(input, option) =>
                                                                (option?.label as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                            }
                                                            options={corpList}
                                                        />
                                                    </Form.Item>
                                                    {robotCorpId && <Form.Item
                                                        {...restField}
                                                        label={<strong>机器人号</strong>}
                                                        name={[name, 'robotCorpUser']}
                                                        rules={[{ required: true, message: '请选择素材群主体!' }]}
                                                    >
                                                        <SelectCorpUser placeholder="请选择机器人号" corpId={robotCorpId} type="radio" />
                                                    </Form.Item>}
                                                    <Form.Item label={<strong>发送群对象配置</strong>}>
                                                        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
                                                            <Form.Item
                                                                {...restField}
                                                                name={[name, 'externalUserType']}
                                                                noStyle
                                                            >
                                                                <Radio.Group options={[{ label: '全部', value: 'all' }, { label: '指定', value: 'specify' }]} />
                                                            </Form.Item>
                                                            {sendData?.[i]?.externalUserType === 'specify' && <div style={{ marginTop: 8, width: '100%' }}>
                                                                <Form.Item
                                                                    {...restField}
                                                                    name={[name, 'externalUserFilter']}
                                                                    noStyle
                                                                >
                                                                    <FilterUser configType={'GROUP_GROUP'} isSHow />
                                                                </Form.Item>
                                                            </div>}
                                                        </div>
                                                    </Form.Item>
                                                </Card>
                                            })}
                                        </>
                                    )}
                                </Form.List>
                            </div>
                        </Card>
                    })}
                </>
            )}
        </Form.List>
    </Form>
};

export default React.memo(PreviewStrategy);