import React, { useContext, useState } from 'react';
import style from '../../../../../businessPlan/create/index.less'
import useNewToken from '@/Hook/useNewToken';
import { DispatchOfficialChatCreate } from '../..';
import { Button, Empty, message } from 'antd';
import SettingsContent from './settingsContent';
import PreviewContent from './previewContent';

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

    /*******************************************/
    const { token } = useNewToken()
    const { setSettings, settings, onPreviewReset, isEditSc } = useContext(DispatchOfficialChatCreate)!;
    const [newVisible, setNewVisible] = useState<boolean>(false);
    /*******************************************/

    return <>
        <div className={`${style.settingsBody_content_row}`} style={{ width: '65%' }}>
            <div className={`${style.settingsBody_content_col}`} style={{ width: '100%' }}>
                <div className={style.title}>
                    <span>内容</span>
                </div>
                <div className={style.detail}>
                    <div className={style.detail_title}>群发内容配置</div>
                    <div className={style.detail_body}>
                        {settings?.strategyDTO && Object.keys(settings?.strategyDTO).length > 0 ? <>
                            <PreviewContent strategyList={settings?.strategyDTO?.strategyList} />
                        </> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
                    </div>
                </div>
                <div className={style.detail_footer}>
                    {settings?.strategyDTO && Object.keys(settings?.strategyDTO).length > 0
                        ? <Button type="link" style={{ padding: 0, fontSize: 12 }} size="small" onClick={() => setNewVisible(true)}>编辑</Button>
                        : <Button type="link" style={{ padding: 0, fontSize: 12 }} size="small" onClick={() => message.error('请先设置策略')}>编辑</Button>
                    }
                </div>
            </div>
        </div>

        {/* 群聊群发内容配置 */}
        {newVisible && <SettingsContent
            visible={newVisible}
            value={settings?.strategyDTO}
            onClose={() => setNewVisible(false)}
            isEditSc={isEditSc}
            onChange={(values) => {
                setSettings({
                    ...settings,
                    strategyDTO: {
                        ...settings.strategyDTO,
                        ...values
                    }
                })
                setNewVisible(false)
                onPreviewReset();
            }}
        />}
    </>;
};

export default React.memo(Content);