import useNewToken from '@/Hook/useNewToken';
import LookMsg from '@/pages/weComTask/components/previewMsg/lookMsg';
import { getMsgData } from '@/pages/weComTask/page/businessPlan/create/components/massSending/showContent';
import { welcomeContentData } from '@/pages/weComTask/page/businessPlan/create/const';
import { Empty, Tabs, Typography } from 'antd';
import React, { useState } from 'react';
const { Text } = Typography;

interface PreviewContentProps {
    strategyList: { [x: string]: any }[];
}
/**
 * 预览
 * @returns 
 */
const PreviewContent: React.FC<PreviewContentProps> = ({ strategyList }) => {

    /****************************************/
    const [activeKey, setActiveKey] = useState<string>('1')
    /****************************************/

    return <Tabs
        activeKey={activeKey}
        tabPosition='left'
        style={{
            height: '100%',
            width: '100%'
        }}
        onChange={(key) => { setActiveKey(key) }}
        items={strategyList.map((item, index) => {
            return {
                label: <div style={{ maxWidth: 100 }}><Text>{item.strategyName}</Text></div>,
                key: `${index + 1}`,
                children: <div style={{ width: '100%', height: 282, overflow: 'hidden', overflowY: 'auto' }}>
                    <PreviewSendData sendData={item.sendData} />
                </div>
            }
        })}
    />;
};

const PreviewSendData: React.FC<{ sendData: { [x: string]: any }[]; }> = ({ sendData }) => {

    /****************************************/
    const [activeKey, setActiveKey] = useState<string>('1')
    const { token } = useNewToken()
    /****************************************/

    return <Tabs
        activeKey={activeKey}
        tabPosition='left'
        style={{
            height: '100%',
            width: '100%'
        }}
        onChange={(key) => { setActiveKey(key) }}
        items={sendData.map((item, index) => {
            return {
                label: <div style={{ maxWidth: 150 }}><Text>{item.sendGroupName}</Text></div>,
                key: `${index + 1}`,
                children: <div style={{ width: '100%', height: 282, overflow: 'hidden', overflowY: 'auto' }}>
                    {item?.contentDTO?.length > 0 ? <>
                        <div style={{ backgroundColor: token.colorPrimary, padding: 4, color: '#FFF', fontSize: 12 }}>
                            <div>
                                发送模式：{welcomeContentData?.find(i => i.value === item?.sendMode)?.label}
                            </div>
                        </div>
                        {item?.contentDTO?.map((item, index) => {
                            return <div key={index} style={{ marginTop: 5, backgroundColor: '#f1f1f1', borderRadius: 6, padding: '5px 10px 16px' }}>
                                <h3 style={{ textAlign: 'center' }}>内容{index + 1}</h3>
                                <LookMsg data={getMsgData(item, token)} />
                            </div>
                        })}
                    </> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
                </div>
            }
        })}
    />
}

export default PreviewContent;