import React, { useContext, useState } from 'react';
import style from '../../index.less';
import { Button, Empty, Space } from 'antd';
import SettingsWelcome from './settingsWelcome';
import useNewToken from '@/Hook/useNewToken';
import PreviewWelcome from './previewWelcome';
import { DispatchTaskCreate } from '../..';

/**
 * 欢迎语
 * @returns 
 */
const Welcome: React.FC = () => {

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

    return <>
        <div className={`${style.settingsBody_content_row}`}>
            <div className={`${style.settingsBody_content_col}`} style={{ width: '100%' }}>
                <div className={style.title}>
                    <span>欢迎语</span>

                    {(settings?.welcomeMsgTemplateDTO && Object.keys(settings?.welcomeMsgTemplateDTO).length > 0 && !isEditSc) && <Space>
                        <Button
                            type="link"
                            danger
                            style={{ padding: 0, fontSize: 12 }}
                            onClick={() => {
                                const corpUsers = settings?.corpUsers?.map(item => {
                                    delete item?.welcomeMsgContent
                                    return item
                                })
                                setSettings({
                                    ...settings,
                                    corpUsers,
                                    welcomeMsgTemplateDTO: undefined
                                })
                                onPreviewReset()
                            }}
                        >清空</Button>
                    </Space>}

                </div>
                <div className={style.detail}>
                    <div className={style.detail_title}>欢迎语配置</div>
                    <div className={style.detail_body}>
                        {settings?.welcomeMsgTemplateDTO && Object.keys(settings?.welcomeMsgTemplateDTO).length > 0 ? <PreviewWelcome
                            welcomeMsgTemplateDTO={settings?.welcomeMsgTemplateDTO}
                            bookList={bookList}
                            bookPlatForm={bookPlatForm}
                        /> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
                    </div>
                </div>
                <div className={style.detail_footer}>
                    <Button type="link" style={{ padding: 0, fontSize: 12 }} size="small" onClick={() => setNewVisible(true)}>编辑</Button>
                </div>
            </div>
        </div>

        {/* 配置欢迎语 */}
        {newVisible && <SettingsWelcome
            visible={newVisible}
            value={settings?.welcomeMsgTemplateDTO}
            isEditSc={isEditSc}
            onClose={() => {
                setNewVisible(false)
            }}
            onChange={(values) => {
                const corpUsers = settings?.corpUsers?.map(item => {
                    delete item?.welcomeMsgContent
                    return item
                })
                setSettings({
                    ...settings,
                    corpUsers,
                    welcomeMsgTemplateDTO: values
                })
                onPreviewReset()
                setNewVisible(false)
            }}
        />}
    </>
};

export default React.memo(Welcome);