import { App, Button, Card, Form, Input, Modal } from "antd";
import React, { useEffect, useRef, useState } from "react";
import '../../../../businessPlan/create/global.less'
import SendTimeSet from "@/pages/weComTask/components/sendTimeSet";
import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
import NewSteps, { NewStepsItem } from "@/pages/weComTask/components/newSteps";
import dayjs from 'dayjs';
import style from '../../../../businessPlan/create/components/massSending/index.less'

/**
 * 朋友圈策略配置
 * @param param0 
 * @returns 
 */
const SettingsStrategy: React.FC<GROUP_CHAT_CREATE.FoundationProps<any>> = ({ visible, onClose, value, onChange }) => {

    /************************************/
    const { message } = App.useApp()
    const ref1 = useRef<HTMLDivElement>(null)
    const [form] = Form.useForm();
    const strategyList = Form.useWatch('strategyList', form);

    const [stepsList, setStepsList] = useState<NewStepsItem[]>([
        { title: '朋友圈配置', description: '朋友圈类型、朋友圈标题、适用产品', id: 'basicInfo' },
        {
            title: '朋友圈策略', children: [{ title: `策略1`, id: 'strategy_0', children: [{ title: `发送时间`, id: `strategy_0_strategyName` }] }, { title: `完成` }]
        },
        { title: '完成' }
    ])
    /************************************/

    // 回填
    useEffect(() => {
        if (value && Object.keys(value).length) {
            const data = {
                ...value, strategyList: value?.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
                    }
                })
            }
            filedUpdateChange(data)
            form.setFieldsValue(data)
        }
    }, [value])

    const handleOk = () => {
        form.validateFields().then((values) => {
            const data = {
                ...values,
                strategyList: values?.strategyList?.map(item => {
                    const { startTime, endTime, sendDay, sendTime, timeRepeatType, repeatArray, ...rest } = item
                    const data = { ...rest, timeRepeatType }
                    if (timeRepeatType === 'TIME_TYPE_SINGLE_PLACE') {
                        // 定时发送
                        data.sendDay = dayjs(sendDay).format('YYYY-MM-DD')
                        data.sendTime = dayjs(sendDay).format('HH:mm:ss')
                    } else if (timeRepeatType === 'TIME_TYPE_REPEAT_DAY') {
                        // 每日循环
                        data.startTime = dayjs(startTime).format('YYYY-MM-DD')
                        if (endTime) {
                            data.endTime = dayjs(endTime).format('YYYY-MM-DD')
                        }
                        data.sendTime = dayjs(sendTime).format('HH:mm:ss')
                    } else if (timeRepeatType === 'TIME_TYPE_REPEAT_WEEK' || timeRepeatType === 'TIME_TYPE_REPEAT_MONTH') {
                        // 每周循环、每月循环
                        data.startTime = dayjs(startTime).format('YYYY-MM-DD')
                        data.sendTime = dayjs(sendTime).format('HH:mm:ss')
                        if (endTime) {
                            data.endTime = dayjs(endTime).format('YYYY-MM-DD')
                        }
                        data.repeatArray = timeRepeatType === 'TIME_TYPE_REPEAT_MONTH' ? repeatArray : repeatArray.filter(item => Number(item) < 8)
                    }
                    return data
                })
            }
            onChange(data)
        }).catch(() => {
            form.submit()
        });
    };


    const filedUpdateChange = ({ momentSendName, strategyList }: any) => {
        const isChecked = (content: NewStepsItem[]) => {
            return content.every(item => {
                if (item.children) {
                    return isChecked(item.children)
                }
                return item.checked
            })
        }

        const content = strategyList?.map((item, index) => {
            const { timeRepeatType, sendDay, startTime, sendTime, repeatArray } = item
            const sendTimeChecked =
                timeRepeatType === "TIME_TYPE_SINGLE_TIMELY" ||
                (timeRepeatType === "TIME_TYPE_SINGLE_PLACE" && sendDay) ||
                (timeRepeatType === "TIME_TYPE_REPEAT_DAY" && startTime && sendTime) ||
                ((timeRepeatType === "TIME_TYPE_REPEAT_WEEK" || timeRepeatType === "TIME_TYPE_REPEAT_MONTH") && startTime && sendTime && repeatArray)

            const children = [
                {
                    title: `发送时间`, checked: sendTimeChecked, id: `strategy_${index}_strategyName`
                }
            ]

            return {
                title: `策略${index + 1}`,
                id: `strategy_${index}`,
                children: children,
                checked: isChecked(children)
            }
        })

        const isChecked1 = !!momentSendName
        const isChecked2 = isChecked(content)
        const stepsData = [
            { title: '朋友圈配置', description: '朋友圈标题', checked: isChecked1, id: 'basicInfo' },
            {
                title: '朋友圈策略', checked: isChecked2, children: [...content, { title: `完成`, checked: isChecked2 }]
            },
            { title: '完成', checked: isChecked1 && isChecked2 }
        ]
        setStepsList(stepsData)
    }

    return <Modal
        title={<strong>群聊朋友圈策略配置  &nbsp;&nbsp;&nbsp;<span style={{ color: 'red' }}>对于执行时间冲突的策略，按照策略的排序执行</span></strong>}
        open={visible}
        onCancel={onClose}
        width={850}
        onOk={handleOk}
        className={`settingsModal`}
    >
        <div className={`body_steps`}>
            <NewSteps
                items={stepsList}
                onChange={(e) => {
                    if (e?.id)
                        ref1.current?.querySelector('#' + e?.id)?.scrollIntoView({ behavior: 'smooth' })
                }}
            />
        </div>
        <div className={`body_content`} ref={ref1}>
            <Form
                form={form}
                name="newMomentsMassSending"
                labelAlign='left'
                labelCol={{ span: 5 }}
                colon={false}
                scrollToFirstError={{
                    behavior: 'smooth',
                    block: 'center'
                }}
                onFinishFailed={({ errorFields }) => {
                    message.error(errorFields?.[0]?.errors?.[0])
                }}
                initialValues={{
                    strategyList: [{ id: Date.now() }],
                }}
                onFieldsChange={() => {
                    filedUpdateChange(form.getFieldsValue())
                }}
                preserve={true}
            >
                <Card title={<strong>基础信息配置</strong>} style={{ background: '#fff', marginBottom: 10 }} hoverable id='basicInfo'>

                    <Form.Item label={<strong>朋友圈标题</strong>} name="momentSendName" rules={[{ required: true, message: '请输入标题!' }]}>
                        <Input placeholder="请输入标题" style={{ width: 358 }} allowClear />
                    </Form.Item>
                </Card>

                <Form.List name="strategyList">
                    {(fields, { add, remove }) => (
                        <>
                            {fields.map(({ key, name, ...restField }, index) => {
                                const timeRepeatType = strategyList?.[index]?.timeRepeatType

                                return <Card
                                    key={key}
                                    title={<strong>策略{index + 1}配置</strong>}
                                    style={{ background: '#fff', marginBottom: 10 }}
                                    hoverable
                                    id={`strategy_${index}`}
                                    extra={strategyList?.length > 1 ? <Button icon={<DeleteOutlined />} type='link' style={{ color: 'red' }} onClick={() => remove(name)}></Button> : null}
                                >
                                    <div className={style.strategy_item} id={`strategy_${index}_strategyName`}>
                                        <Form.Item
                                            {...restField}
                                            label={<strong>策略名称</strong>}
                                            name={[name, 'strategyName']}
                                            rules={[{ required: false, message: '请输入策略名称!' }]}
                                        >
                                            <Input placeholder="请输入标题" style={{ width: 358 }} allowClear />
                                        </Form.Item>
                                        <SendTimeSet
                                            active='all'
                                            form={form}
                                            restField={restField}
                                            name={name}
                                            timeRepeatType={timeRepeatType}
                                            restFieldChange={(value) => {
                                                form.setFieldsValue({
                                                    strategyList: strategyList?.map((item, i) => {
                                                        if (i === index) {
                                                            return {
                                                                ...item,
                                                                timeRepeatType: value,
                                                                repeatArray: undefined
                                                            }
                                                        }
                                                        return item
                                                    })
                                                });
                                            }}
                                        />
                                    </div>
                                </Card>
                            })}
                            <Form.Item>
                                <Button type="primary" onClick={() => add({ id: Date.now() })} block icon={<PlusOutlined />}>
                                    新增策略组
                                </Button>
                            </Form.Item>
                        </>
                    )}
                </Form.List>
            </Form>
        </div>
    </Modal>
}

export default React.memo(SettingsStrategy);