import { Button, DatePicker, Form, message, Modal, Popconfirm, Table } from 'antd';
import React, { useState } from 'react';
import '../../tencentAdPutIn/index.less'
import moment from 'moment';

interface SetConfigProps {
    value?: string[]
    onChange?: (value: string[]) => void
}

const SetTime: React.FC<SetConfigProps> = ({ value = [], onChange }) => {

    /*************************************/
    const [visible, setVisible] = useState<boolean>(false)
    /*************************************/

    return <div>
        <Button type="primary" onClick={() => setVisible(true)}>添加执行时间</Button>
        {value?.length > 0 && <Table
            style={{ marginTop: 10 }}
            dataSource={value.map((item, index) => ({ time: item, id: index + 1 }))}
            columns={[
                {
                    title: '执行时间',
                    dataIndex: 'time',
                    key: 'time',
                    align: 'center',
                    width: 100
                },
                {
                    title: '操作',
                    dataIndex: 'cz',
                    key: 'cz',
                    render(_, record) {
                        return <Popconfirm
                            title="确定删除该项?"
                            onConfirm={() => {
                                onChange?.(value?.filter((_, index) => record.id !== (index + 1)))
                            }}
                        >
                            <a>删除</a>
                        </Popconfirm>
                    },
                },
            ]}
            rowKey={'id'}
            size='small'
            bordered
            pagination={false}
        />}
        {visible && <SetConfigModal
            visible={visible}
            onClose={() => setVisible(false)}
            onChange={(newValue) => {
                setVisible(false)
                const oldValue = JSON.parse(JSON.stringify(value || []))
                oldValue.push(newValue)
                const set = new Set(oldValue)
                onChange?.([...set] as string[])
            }}
        />}
    </div>
};

interface SetConfigModalProps {
    onChange?: (value: string) => void
    visible?: boolean;
    onClose?: () => void;
}
const SetConfigModal: React.FC<SetConfigModalProps> = ({ visible, onChange, onClose }) => {

    /***********************************/
    const [form] = Form.useForm();
    /***********************************/

    const handleOk = () => {
        form.validateFields().then((values) => {
            onChange?.(moment(values.time).format('HH:mm'))
        })
    }

    const disabledMinutes = () => {
        // 允许的分钟数：15和45
        const allowedMinutes = [15, 45];
        // 生成0-59的分钟数组，过滤掉不在allowedMinutes中的分钟
        return Array.from({ length: 60 }, (_, i) => i).filter(minute => !allowedMinutes.includes(minute));
    };

    return <Modal
        title={<strong>添加执行时间</strong>}
        open={visible}
        onCancel={onClose}
        onOk={handleOk}
        className='modalResetCss'
    >
        <Form
            form={form}
            name="newConfig"
            labelAlign='left'
            labelCol={{ span: 5 }}
            colon={false}
            scrollToFirstError={{
                behavior: 'smooth',
                block: 'center'
            }}
            onFinishFailed={({ errorFields }) => {
                message.error(errorFields?.[0]?.errors?.[0])
            }}
            onFinish={handleOk}
        >
            <Form.Item label={<strong>执行时间</strong>} name="time" rules={[{ required: true, message: '请选择充值类型!' }]}>
                <DatePicker
                    picker={'time'}
                    format={'HH:mm'}
                    minuteStep={15}
                    style={{ width: '100%' }}
                    disabledTime={() => ({
                        disabledMinutes: () => disabledMinutes(),
                    })}
                    hideDisabledOptions={true}
                />
            </Form.Item>
        </Form>
    </Modal>
};

export default React.memo(SetTime);