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

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

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

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

    const [form] = Form.useForm();

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

    // 获取知识详情
    const fetchDetail = async () => {
        try {
            const res = await apis.fetchTakaiDocumentDetailLibApi(props.id);
            const { id, name, knowledge_type, custom_separator, sentence_size } = res.data;
            form.setFieldsValue({
                id: id,
                name: name,
                knowledge_type: knowledge_type,
                custom_separator: custom_separator,
                sentence_size: sentence_size,
            });
        } catch (error: any) {
            message.error(error.msg);
        }
    };

    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 };
            if(values.knowledge_type === '5'){
                data.custom_separator = [ '"\\n"'];
                data.sentence_size = 300;
            }else{
                data.sentence_size = 20;
                data.custom_separator = [ '"\\n"'];
            }
            console.log(data, 'data');
            await onClickConfirm(props.id, data);
        }).catch((error) => {
            console.error(error);
        });
    };

    return (
        <Modal
            width={500}
            title='重命名'
            maskClosable={false}
            centered={true}
            open={open}
            onOk={handleClickConfirm}
            onCancel={onClickCancel}
        >
            <Spin spinning={loading}>
                <Form form={form} layout='vertical'>
                    <FormItem
                        label='文件名称'
                        name='name'
                    >
                        <Input placeholder='请输入知识库名称' />
                    </FormItem>
                    {/* <FormItem
                        label='知识类型'
                        name='knowledge_type'
                        rules={[{ required: true, message: '知识类型不能为空' }]}
                    >
                        <Select
                            style={{ width: '100%' }}
                            placeholder='请选择知识类型'
                            allowClear={true}
                        >
                            <Option value='1'>1:文章知识:支持pdf,url,docx</Option>
                            <Option value='2'>2:问答知识-文档:支持pdf,url,docx</Option>
                            <Option value='3'>3:问答知识-表格:支持xlsx</Option>
                            <Option value='4'>4:商品库-表格:支持xlsx</Option>
                            <Option value='5'>5:自定义:支持pdf,url,docx</Option>
                        </Select>
                    </FormItem> */}
                    <div style={{ width: '100%', height: 10 }}></div>
                </Form>
            </Spin>
        </Modal>
    );
};

export default InfoModal;