import React from 'react';
import { TIME_TYPE, WEEK_SERIRES_DX } from '../../page/businessPlan/create/const';
import { Typography } from 'antd';
const { Text, Paragraph, Title } = Typography;

type TimeTypeKeys = keyof typeof TIME_TYPE;
interface Props {
    timeRepeatType: TimeTypeKeys,
    repeatArray?: number[],
    sendDay?: string,
    sendTime?: string,
    startTime?: string,
    endTime?: string,
}
const PreviewTime: React.FC<Props> = ({ timeRepeatType, repeatArray, sendDay, sendTime, startTime, endTime }) => {

    switch (timeRepeatType) {
        case 'TIME_TYPE_REPEAT_DAY': // 每日循环
            return <div>
                <Title level={5} style={{ marginTop: 0 }}>{TIME_TYPE[timeRepeatType]}</Title>
                <Paragraph style={{ margin: 0 }}>执行日期：<span style={{ color: '#1890ff' }}>{startTime} - {endTime || '长期执行'}</span></Paragraph>
                <Paragraph style={{ margin: 0 }}>执行时间：<span style={{ color: '#1890ff' }}>{sendTime}</span></Paragraph>
            </div>
        case 'TIME_TYPE_REPEAT_MONTH': // 每月循环
            return <div>
                <Title level={5} style={{ marginTop: 0 }}>{TIME_TYPE[timeRepeatType]}</Title>
                <Paragraph style={{ margin: 0 }}>执行日期：<span style={{ color: '#1890ff' }}>{startTime} - {endTime || '长期执行'}</span></Paragraph>
                <Paragraph style={{ margin: 0 }}>执行时间：<span style={{ color: '#1890ff' }}>{sendTime}</span></Paragraph>
                <Paragraph style={{ margin: 0 }}>每月执行天：<span style={{ color: '#1890ff' }}>{repeatArray?.map(item => item + '号').join('、')}</span></Paragraph>
            </div>
        case 'TIME_TYPE_REPEAT_WEEK': // 每周循环
            return <div>
                <Title level={5} style={{ marginTop: 0 }}>{TIME_TYPE[timeRepeatType]}</Title>
                <Paragraph style={{ margin: 0 }}>执行日期：<span style={{ color: '#1890ff' }}>{startTime} - {endTime || '长期执行'}</span></Paragraph>
                <Paragraph style={{ margin: 0 }}>执行时间：<span style={{ color: '#1890ff' }}>{sendTime}</span></Paragraph>
                <Paragraph style={{ margin: 0 }}>每周执行天：<span style={{ color: '#1890ff' }}>{repeatArray?.map(item => WEEK_SERIRES_DX[item]).join('、')}</span></Paragraph>
            </div>
        case 'TIME_TYPE_SINGLE_PLACE': // 定时发送
            return <div>
                <Title level={5} style={{ marginTop: 0 }}>{TIME_TYPE[timeRepeatType]}</Title>
                <Paragraph style={{ margin: 0 }}>执行时间：<span style={{ color: '#1890ff' }}>{sendDay} {sendTime}</span></Paragraph>
            </div>
    }

    return <div>
        <Title level={5} style={{ marginTop: 0 }}>{TIME_TYPE[timeRepeatType]}</Title>
    </div>
};

export default React.memo(PreviewTime);