import * as React from 'react';
import { Modal, Spin, Form, Input, Select, message, Button, Steps, Switch } from 'antd';
import { apis, ModifyDocumentApiParams } from '@/apis';
import LocalStorage from '@/LocalStorage';
import { set } from 'mobx';

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

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



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

    const [form] = Form.useForm();

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

    type EmbeddingList = {
        label: string,
        value: string,
    }[];

    interface AuditInfo {
        title: string,
        description: string
        onClick: () => void,
    }

    const [embeddingList, setEmbeddingList] = React.useState<EmbeddingList>([]);
    const description = 'This is a description';
    const [switchFlag, setSwitchFlag] = React.useState<boolean>(false);
    const [auditInfo, setAuditInfo] = React.useState<AuditInfo[]>([]);
    const [current, setCurrent] = React.useState<number>(-1);
    const [refuse, setRefuse] = React.useState<boolean>(false);
    const [pass, setPass] = React.useState<boolean>(false);

    const onChange = (checked: boolean) => {
        if (checked) {
            setSwitchFlag(true);
        } else {
            setSwitchFlag(false);
        }
    };

    // 获取知识库详情
    const fetchDetail = async () => {
        try {
            const res = await apis.fetchTakaiApplicationDetail(props.id);
            if (res.code === 200) {
                const { name, status, comment, nodeOrder } = res.data.detail;
                form.setFieldsValue({
                    name: name,
                    status: status,
                    comment: '',
                    nodeOrder: nodeOrder
                });
                if (status === 'Y') {
                    setPass(true);
                }
                if (status === 'N') {
                    setRefuse(true);
                }
            }

        } catch (error: any) {
            message.error(error.msg);
        }
    };
    const init = async () => {
        setLoading(true);
        if (props.id) {
            await fetchDetail();
        }
        setLoading(false);
    };

    React.useEffect(() => {
        init();
        const cFlag = LocalStorage.getStatusFlag('deepseek:knowledge:create');
        setCreateFlag(cFlag);
        const uFlag = LocalStorage.getStatusFlag('deepseek:knowledge:update');
        setUpdateFlag(uFlag);
    }, []);

    // 点击通过
    const handleClickConfirm = () => {
        form.validateFields().then(async (values) => {
            const userInfo = LocalStorage.getUserInfo();
            const userId = (userInfo?.id ?? '').toString();
            const data = {
                ...values,
                approver: userId,
                status: 'Y',
            };
            console.log(data, 'data');
            await onClickConfirm(props.id, userId, data);
        }).catch((error) => {
            console.error(error);
        });
    };

    // 点击拒绝
    const handleClickCancel = () => {
        form.validateFields().then(async (values) => {
            const userInfo = LocalStorage.getUserInfo();
            const userId = (userInfo?.id ?? '').toString();
            const data = {
                ...values,
                approver: userId,
                status: 'N',
            };
            await onClickCancel(props.id, userId, data);
        }).catch((error) => {
            console.error(error);
        });
    };

    return (
        <Modal
            width={600}
            title={'应用审核'}
            destroyOnClose={true}
            maskClosable={false}
            centered={true}
            open={open}
            onCancel={onClickClose}
            // onOk={handleClickConfirm}
            // onCancel={onClickCancel}
            footer={[
                <Button key="submit" type="primary" danger onClick={handleClickCancel} loading={loading}>
                    拒绝
                </Button>,
                <Button key="submit" type="primary" onClick={handleClickConfirm} loading={loading}>
                    通过
                </Button>
            ]}
        >
            <Spin spinning={loading}>
                <Form form={form} layout='vertical'>
                    <FormItem
                        label='应用名称'
                        name='name'
                    >
                        <Input disabled={true} />
                    </FormItem>
                    <div style={{ width: '100%', height: 0, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <FormItem
                            label='审核节点'
                            name='nodeOrder'
                            hidden={true}
                        >
                            <Input disabled={true} />
                        </FormItem>
                    </div>
                    <FormItem
                        label='审核意见'
                        name='comment'
                    >
                        <TextArea
                            maxLength={100}
                        />
                    </FormItem>
                    <div style={{ width: '100%', height: 10 }}></div>
                </Form>
            </Spin>
        </Modal >
    );
};

export default InfoModal;