import React from "react";
import { Col, Form, Modal, Radio, Row, Select } from "kts-xui";
import { DefaultOptionType } from "kts-components-antd-x4/lib/select";
import './index.less';

export interface IFormValues {

    /** 开票种类 */
    billingType: 'digital' | 'taxation';

    /** 特定业务 */
    business?: any;

    /** 选择票类 */
    invoiceType?: any;
}

export interface IInvoiceTypeModalProps {

    /** 是否禁用 */
    isDisabled?: boolean;

    /** 窗口标题 */
    modalTitle?: string;

    /** 是否开启 */
    open?: boolean;

    /** 点击了确认 */
    onOk?: (values: IFormValues) => void;

    /** 点击了取消 */
    onCancel?: () => void;

    /** 切换了 开票种类 */
    onChange?: (e: 'digital' | 'taxation') => void;
    
    /** 切换了 发票类型 */
    onInvoiceTypeChange?: (e: any) => void;

    /** 禁用列表 */
    disableds?: ('billingType' | 'invoiceType' | 'business')[];

    /** 选择票类 选项 */
    invoiceTypeOptions?: DefaultOptionType[];

    /** 特定业务 选项 */
    businessOptions?: DefaultOptionType[];

    /** 票类默认值 */
    defaultInvoiceType?: any;

    /** 特定业务默认值 */
    defaultBusiness?: any;

    /** 开票种类 默认值 */
    defaultBillingType?: 'digital' | 'taxation';
}

export default function InvoiceTypeModal(props: IInvoiceTypeModalProps) {

    const { disableds = [] } = props;

    const [formValues, setValues] = React.useState<IFormValues>({ billingType: props.defaultBillingType || 'digital' });

    const [form] = Form.useForm<IFormValues>();

    const onConfirm = React.useCallback(async () => {
        const values = await form.validateFields();
        props.onOk && props.onOk(values);
    }, [props.onOk, form])

    const onChangeBillingType = React.useCallback(e => {
        props.onChange && props.onChange(e.target.value);
        form.setFieldsValue({ invoiceType: null, business: null });
        setValues(form.getFieldsValue());
    }, [props.onChange, form])
    const onInvoiceTypeChange = React.useCallback(value => {
        props.onInvoiceTypeChange && props.onInvoiceTypeChange(value);
        form.setFieldsValue({ business: null });
        setValues(form.getFieldsValue());
    }, [props.onInvoiceTypeChange, form])
    React.useEffect(() => {
        if (props.open) {
            const values = {
                billingType: props.defaultBillingType || 'digital',
                invoiceType: props.defaultInvoiceType,
                business: props.defaultBusiness,
            }

            form.resetFields();
            form.setFieldsValue(values);
            setValues(values);
        }
    }, [props.open, props.defaultBillingType, props.defaultBusiness, props.defaultInvoiceType, form])

    return (
        <Modal
            title={props.modalTitle || "选择开具信息"}
            open={props.open}
            onOk={onConfirm}
            onCancel={props.onCancel}
            okText='确定'
            cancelText='取消'
        >
            <Form
                form={form}
                layout="vertical"
                style={{ paddingTop: 20 }}
                onValuesChange={(_, e) => { setValues(e) }}
            >
                <Row gutter={[16, 16]}>
                    <Col span={24} >
                        <Form.Item name='billingType' >
                            <Radio.Group
                                size='large'
                                className="goods-list-digtal-reselect-invoice-typeModal-radio"
                                optionType="button"
                                disabled={disableds.indexOf('billingType') >= 0}
                                onChange={onChangeBillingType}
                                options={[
                                    { label: '数电发票', value: 'digital' },
                                    { label: '税控发票', value: 'taxation' },
                                ]}
                            />
                        </Form.Item>
                    </Col>

                    <Col span={12} >
                        <Form.Item
                            name='invoiceType'
                            label="选择票类"
                            rules={[{ required: true, message: '选择票类必填' }]}
                        >
                            <Select
                                size='large'
                                allowClear
                                placeholder="请选择（必填项）"
                                disabled={disableds.indexOf('invoiceType') >= 0}
                                options={props.invoiceTypeOptions}
                                onChange={onInvoiceTypeChange}
                            />
                        </Form.Item>
                    </Col>

                    <Col span={12} >
                        <Form.Item name='business' label="特定业务">
                            <Select
                                size='large'
                                allowClear
                                placeholder="请选择（非必填项）"
                                disabled={disableds.indexOf('business') >= 0 || !formValues.invoiceType}
                                options={props.businessOptions}
                            />
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </Modal>
    )
}