import React, { useContext, useState } from 'react';
import style from '../../index.less';
import { App, Button, Empty, Space } from 'antd';
import { DispatchTaskCreate } from '../..';
import SettingsMassSending from './settingsMassSending';
import '../../global.less'
import useNewToken from '@/Hook/useNewToken';
import ShowContent from './showContent';
import PreviewMassSendingStrategy from './previewMassSendingStrategy';

/**
 * 群发
 * @returns 
 */
const MassSending: React.FC = () => {

    /***************************************************/
    const { token } = useNewToken()
    const { message } = App.useApp()
    const { setSettings, settings, bookPlatForm, isEditSc, onPreviewReset } = useContext(DispatchTaskCreate)!;

    const [newVisible, setNewVisible] = React.useState(false);
    const [createType, setCreateType] = useState<'STRATEGY' | 'CONTENT'>()
    /***************************************************/

    return <>
        <div className={`${style.settingsBody_content_row}`} style={{ width: 'calc(100% / 2)' }}>
            <div className={`${style.settingsBody_content_col}`} style={{ width: '50%' }}>
                <div className={style.title}>
                    <span>群发</span>
                </div>
                <div className={style.detail}>
                    <div className={style.detail_title}>群发策略配置</div>
                    <div className={style.detail_body}>
                        {settings?.massSendingStrategy && Object.keys(settings?.massSendingStrategy).length > 0 ? <>
                            <PreviewMassSendingStrategy massSendingStrategy={settings?.massSendingStrategy} />
                        </> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
                    </div>
                </div>
                <div className={style.detail_footer}>
                    <Button
                        type="link"
                        style={{ padding: 0, fontSize: 12 }}
                        size='small'
                        disabled={isEditSc}
                        onClick={() => {
                            setNewVisible(true);
                            setCreateType('STRATEGY')
                        }}
                    >编辑</Button>
                </div>
            </div>
            <div className={`${style.settingsBody_content_col}`} style={{ width: '50%' }}>
                <div className={style.title}>
                    <span></span>
                    {(settings?.massSendingStrategy && !isEditSc && Object.keys(settings?.massSendingStrategy).length > 0) && <Space>
                        <Button
                            type="link"
                            danger
                            style={{ padding: 0, fontSize: 12 }}
                            onClick={() => {
                                const corpUsers = settings?.corpUsers?.map(item => {
                                    delete item?.groupMsgContent
                                    return item
                                })
                                setSettings({
                                    ...settings,
                                    corpUsers,
                                    massSendingStrategy: undefined,
                                    massSendingContent: undefined
                                })
                                onPreviewReset()
                            }}
                        >清空</Button>
                    </Space>}
                </div>
                <div className={style.detail}>
                    <div className={style.detail_title}>群发内容配置</div>
                    <div className={style.detail_body} style={{ padding: 0 }}>
                        {settings?.massSendingContent && Object.keys(settings?.massSendingContent) ? <>
                            <ShowContent
                                strategySettings={settings?.massSendingStrategy?.strategySettings}
                                massSendingContent={settings?.massSendingContent}
                            />
                        </> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
                    </div>
                </div>
                <div className={style.detail_footer}>
                    <Button
                        type="link"
                        style={{ padding: 0, fontSize: 12 }}
                        size='small'
                        onClick={() => {
                            if (!(settings?.massSendingStrategy && Object.keys(settings?.massSendingStrategy))) {
                                message.error('请先配置策略')
                                return
                            }
                            setNewVisible(true); setCreateType('CONTENT')
                        }}
                    >编辑</Button>
                </div>
            </div>
        </div>

        {/* 模板配置 */}
        {newVisible && <SettingsMassSending
            isEditSc={isEditSc}
            visible={newVisible}
            createType={createType}
            bookCityList={bookPlatForm?.map(item => ({ label: item.platformName, value: item.platformKey, id: item.id }))}
            value={{
                massSendingContent: settings?.massSendingContent,
                massSendingStrategy: settings?.massSendingStrategy
            }}
            onClose={() => {
                setNewVisible(false)
            }}
            onChange={(values, type) => {
                const corpUsers = settings?.corpUsers?.map(item => {
                    delete item?.groupMsgContent
                    return item
                })
                if (!values?.massSendingContent && settings?.corpUsers?.some(item => item?.groupMsgContent?.length)) {
                    setSettings({
                        ...settings,
                        ...values,
                        corpUsers
                    })
                } else {
                    setSettings({
                        ...settings,
                        ...values,
                        corpUsers
                    })
                }

                if (type === 'OK') {
                    setNewVisible(false)
                }
                onPreviewReset()
            }}
        />}
    </>
};

export default React.memo(MassSending);