import { App, Button, Modal, Space } from 'antd';
import React, { useRef, useState } from 'react';
import '../../global.less';
import Strategy from './strategy';
import Content from './content';

/**
 * 群发配置
 * @param param0 
 * @returns 
 */
const SettingsFriends: React.FC<TASK_CREATE.FriendsProps<any>> = ({ value: { friendsContent, friendsStrategy }, createType, onChange, visible, onClose }) => {

    /****************************************/
    const { message } = App.useApp()
    const ref = useRef(null)
    const ref1 = useRef(null)
    const [type, setType] = useState<'STRATEGY' | 'CONTENT'>(createType)
    /****************************************/

    const handleOk = (p: string) => {
        if (type === 'STRATEGY') {
            ref?.current?.handleOk(p)
        } else {
            ref1?.current?.handleOk(p)
        }
    };

    return <Modal
        title={<strong>{type === 'STRATEGY' ? '群发模板配置' : '群发内容配置'}</strong>}
        open={visible}
        onCancel={onClose}
        width={850}
        className={`settingsModal`}
        footer={<Space>
            <Button onClick={onClose}>取消</Button>
            {type === 'STRATEGY' && <>
                <Button type="primary" onClick={() => handleOk('CREATE_CONTENT')}>编辑群发内容</Button>
            </>}
            <Button type="primary" onClick={() => handleOk('OK')}>确定</Button>
        </Space>}
    >
        {/* 策略 */}
        {type === 'STRATEGY' ? <Strategy
            ref={ref}
            value={friendsStrategy}
            onChange={(value, type) => {
                console.log(value, type)
                if (type === 'CREATE_CONTENT') {
                    setType('CONTENT')
                }
                if (friendsContent && (value?.strategySettings?.length !== friendsContent?.friendsContentDTO?.length)) {
                    message.error('策略配置和内容配置不一致，内容已重置，请重新配置！')
                    onChange({
                        friendsContent: undefined,
                        friendsStrategy: value
                    }, type)
                    return
                }

                onChange({
                    friendsStrategy: value
                }, type)
            }}
        /> : <Content
            ref={ref1}
            friendsStrategy={friendsStrategy}
            value={friendsContent}
            onChange={(value, type) => {
                onChange({
                    friendsContent: value
                }, type)
            }}
        />}

    </Modal>;
};

export default React.memo(SettingsFriends);