import React, { useContext, useState } from "react";
import style from '../../../../../businessPlan/create/index.less'
import { App, Button, Empty, Popconfirm } from "antd";
import useNewToken from "@/Hook/useNewToken";
import { DispatchOfficialChatCreate } from "../..";
import SettingsStrategy from "./settingsStrategy";
import PreviewStrategy from "./previewStrategy";

const Strategy: React.FC = () => {

    /*********************************/
    const { message } = App.useApp()
    const { token } = useNewToken()
    const { setSettings, settings, onPreviewReset, mpList, corpList } = useContext(DispatchOfficialChatCreate)!;
    const [newVisible, setNewVisible] = useState<boolean>(false);
    /*********************************/

    return <>
        <div className={`${style.settingsBody_content_row}`} style={{ width: '35%' }}>
            <div className={`${style.settingsBody_content_col}`} style={{ width: '100%' }}>
                <div className={style.title}>
                    <span>策略</span>
                    {settings?.strategyDTO && Object.keys(settings?.strategyDTO).length > 0 && <Popconfirm
                        title="确定清空？"
                        onConfirm={() => {
                            setSettings(undefined)
                            onPreviewReset();
                        }}
                    >
                        <a style={{ color: 'red' }}>清空</a>
                    </Popconfirm>}
                </div>
                <div className={style.detail}>
                    <div className={style.detail_title}>群发策略配置</div>
                    <div className={style.detail_body}>
                        {settings?.strategyDTO && Object.keys(settings?.strategyDTO).length > 0 ? <>
                            <PreviewStrategy strategyDTO={settings?.strategyDTO} mpList={mpList} corpList={corpList} />
                        </> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
                    </div>
                </div>
                <div className={style.detail_footer}>
                    <Button type="link" style={{ padding: 0, fontSize: 12, color: token.colorPrimary }} size="small" onClick={() => setNewVisible(true)}>编辑</Button>
                </div>
            </div>
        </div>

        {/* 配置基础信息 */}
        {newVisible && <SettingsStrategy
            visible={newVisible}
            value={settings?.strategyDTO}
            mpList={mpList}
            corpList={corpList}
            onClose={() => {
                setNewVisible(false);
            }}
            onChange={(values) => {
                setSettings({
                    ...settings,
                    strategyDTO: values
                });
                onPreviewReset();
                setNewVisible(false);
            }}
        />}
    </>
}

export default React.memo(Strategy);