/** @format */

import * as React from 'react';
import {Form, Input, Switch} from 'antd';
import {FormComponentProps} from 'antd/es/form';
import {GetFieldDecoratorOptions} from 'antd/es/form/Form';
import moment from 'moment';
import Modal from '../../../../../components/modalForm';
import RangePicker from '../../../../../components/datePicker/rangePicker';
const formItemLayout = {
    labelCol: {
        xs: {span: 24},
        sm: {span: 4},
    },
    wrapperCol: {
        xs: {span: 24},
        sm: {span: 18},
    },
};
moment.locale('zh-cn');
const startTime = moment('00:00:00', 'HH:mm:ss');
const endTime = moment('23:59:59', 'HH:mm:ss');
interface Iprops {
    submit?: (values: any) => void;
    loading?: boolean;
    visible?: boolean;
    children: React.ReactNode;
    cancle: () => void;
    formItem: {key: string; options?: GetFieldDecoratorOptions; component: React.ReactNode; label: string}[];
}

export default Form.create<Iprops & FormComponentProps>({name: 'logExportForm'})(
    React.forwardRef((props: Iprops & FormComponentProps, ref) => {
        const {
            submit,
            visible = false,
            loading = false,
            form: {getFieldDecorator, resetFields, validateFieldsAndScroll},
            formItem,
            children,
            cancle,
        } = props;
        const [state, setState] = React.useState({visible: visible});
        React.useImperativeHandle(ref, () => {
            return {
                handleUpdateModalVisible: handleUpdateModalVisible,
            };
        });
        const handleUpdateModalVisible = () => {
            resetFields();
            setState(preState => {
                if (preState.visible) {
                    cancle();
                }
                return {...preState, visible: !preState.visible};
            });
        };
        const handleSubmit = () => {
            validateFieldsAndScroll((error, values) => {
                if (error) return;
                const {time, ...rest} = values;
                const start_timestamp = time[0].unix();
                const end_timestamp = time[1].unix();
                submit && submit({...rest, start_timestamp, end_timestamp});
            });
        };
        return (
            <>
                {React.isValidElement(children) &&
                    React.cloneElement(children, {
                        onClick: handleUpdateModalVisible,
                    })}

                <Modal
                    loading={loading}
                    title='日志导出'
                    visible={state.visible}
                    onCancel={handleUpdateModalVisible}
                    onOk={handleSubmit}
                >
                    <Form {...formItemLayout}>
                        <Form.Item label='任务名称'>
                            {getFieldDecorator('export_name', {
                                initialValue: '',
                                rules: [{required: true, message: '请输入导出任务名称'}],
                            })(<Input placeholder='请输入导出任务名称' />)}
                        </Form.Item>
                        {formItem.map(element => {
                            return (
                                <Form.Item label={element.label} key={element.key}>
                                    {getFieldDecorator(element.key, element.options)(element.component)}
                                </Form.Item>
                            );
                        })}
                        <Form.Item label='日期范围'>
                            {getFieldDecorator('time', {
                                initialValue: [startTime, endTime],
                                rules: [{required: true, message: '请选择导出日志的时间范围'}],
                            })(<RangePicker />)}
                        </Form.Item>
                        <Form.Item label='是否分列'>
                            {getFieldDecorator('is_parse_param', {initialValue: false, valuePropName: 'checked'})(
                                <Switch />,
                            )}
                        </Form.Item>
                    </Form>
                </Modal>
            </>
        );
    }),
);
