import * as React from 'react';
import { Modal, Spin, Form, Input, Select, message, Checkbox, GetProp } from 'antd';
import { apis, ModifyDocumentSettingApiParams } from '@/apis';

const FormItem = Form.Item;
const { Option } = Select;


interface Props {
    id: string,
    open: boolean,
    onClickConfirm: (id: string, data: ModifyDocumentSettingApiParams) => Promise<any>,
    onClickCancel: () => void,
};

const InfoModalSetting: React.FC<Props> = (props: Props) => {
    const {
        id,
        open,
        onClickConfirm,
        onClickCancel,
    } = props;

    const [form] = Form.useForm();

    const [loading, setLoading] = React.useState<boolean>(false);

    const [isVisibleSlice, setIsVisibleSlice] = React.useState(false);
    const [isVisibleSeparator, setIsVisibleSeparator] = React.useState(false);
    const options = [
        { label: '身份证', value: 'ID' },
        { label: '手机号', value: 'Phone' },
        { label: '银行卡', value: 'Car' },
        { label: '自定义', value: 'Custom' },
    ];

    // 获取知识设置详情
    const fetchDetail = async () => {
        try {
            const res = await apis.fetchTakaiDocumentSettingLibApi(props.id);
            console.log(res.data, 'res.data');
            const { knowledgeId, documentId, setSlice, setAnalyze, sliceValue, setTable } = res.data;
            if (res.data.setSlice === '3') {
                setIsVisibleSlice(!isVisibleSlice);
            }
            form.setFieldsValue({
                knowledgeId: knowledgeId,
                documentId: documentId,
                setSlice: setSlice,
                setAnalyze: setAnalyze,
                sliceValue: sliceValue,
                setTable: setTable,
            });
        } catch (error: any) {
            message.error(error.msg);
        }
    };

    const onChangeF = (value: string) => {
        if (value === '3') {
            setIsVisibleSlice(!isVisibleSlice);
        } else {
            setIsVisibleSlice(false);
        }
    };

    const init = async () => {
        setLoading(true);
        if (props.id) {
            await fetchDetail();
        }
        setLoading(false);
    };

    React.useEffect(() => {
        init();
    }, []);

    // 点击确定
    const handleClickConfirm = () => {
        form.validateFields().then(async (values) => {
            const data = { ...values };
            console.log(loading, 'loading');
            await onClickConfirm(props.id, data);
        }).catch((error) => {
            console.error(error);
        })
    };

    return (
        <Modal
            width={600}
            title='知识设置'
            destroyOnClose={true}
            maskClosable={false}
            centered={true}
            open={open}
            onOk={handleClickConfirm}
            onCancel={onClickCancel}
            confirmLoading={loading}
        >
            <Spin spinning={loading}>
                <Form form={form} layout='vertical'>
                    <FormItem
                        label='切片设置'
                        name='setSlice'
                    >
                        {/* <Input placeholder='请输入知识库名称' /> */}
                        <Select
                            style={{ width: '100%' }}
                            allowClear={true}
                            placeholder='请选择切片设置'
                            onChange={onChangeF}
                        >
                            <Option value='0'>按标题段落切片</Option>
                            <Option value='1'>按页切片</Option>
                            {/* <Option value='2'>按问答对切片</Option> */}
                            <Option value='3'>自定义切片</Option>
                        </Select>
                    </FormItem>

                    {isVisibleSlice &&
                        <FormItem
                            label='分隔符'
                            name='sliceValue'
                            rules={[{ required: true, message: '自定义切片设置不能为空' }]}
                        >
                            <Input max={1024}
                            />
                        </FormItem>
                    }

                    <FormItem
                        label='解析设置'
                        name='setAnalyze'
                    >
                        <Select
                            style={{ width: '100%' }}
                            placeholder='请选择解析设置'
                            allowClear={true}
                        >
                            {/* <Option value='0'>过滤图片</Option> */}
                            <Option value='1'>图片转换成标识符</Option>
                            {/* <Option value='2'>多模态图片理解</Option> */}
                        </Select>
                    </FormItem>

                    <FormItem
                        label='table切分'
                        name='setTable'
                    >
                        <Select
                            style={{ width: '100%' }}
                            placeholder='请选择解析设置'
                            allowClear={true}
                        >
                            <Option value='0'>table转图片</Option>
                            <Option value='1'>table转html</Option>
                        </Select>
                    </FormItem>

                    {/* <FormItem
                        label='隐藏敏感信息'
                        name=''
                    >
                        <Checkbox.Group options={options} onChange={onChange} />

                        {isVisibleSeparator &&
                        <FormItem
                        label=''
                        name=''
                        rules={[{ required: true, message: '问答应用名称不能为空' }]}
                    >
                        <Input max={1024} 
                        />
                    </FormItem>
                    }
                    </FormItem> */}
                    <div style={{ width: '100%', height: 10 }}></div>
                </Form>
            </Spin>
        </Modal>
    );
};

export default InfoModalSetting;