import { DrawerForm, ModalForm, ProFormDigit, ProFormGroup, ProFormSelect, ProFormText, ProFormTextArea } from "@ant-design/pro-components";
import { Button, Divider, Flex, Space, Typography } from "antd";
import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
import { tableList } from "../../../api/client";

const EditNode = forwardRef(({ onFinish }, ref) => {
    const [open, setOpen] = useState(false);
    const formRef = useRef(null);
    const [record, setRecord] = useState(null);
    const [clients, setClients] = useState([{ label: "Local", value: 'local' }]);
    const onRequest = async () => {
        const res = await tableList();
        return [{label: "[LOCAL]", value: 0},...res?.data?.map(e => ({ label: e.name, value: e.id }))];
    }
    const onSubmit = async (params) => {
        onFinish && onFinish({ ...params, id: record?.id})
        return true;
    }
    useImperativeHandle(ref, () => ({
        open: (data) => {
            setOpen(true);
            setTimeout(() => setRecord(data), 100);
        }
    }))
    useEffect(() => {
        if (record && formRef.current && open) {
            formRef.current.setFieldsValue(record.detail);
        }
    }, [record, open, formRef.current]);

    return <ModalForm
        title="编辑"
        open={open}
        onOpenChange={e => setOpen(e)}
        formRef={formRef}
        onFinish={onSubmit}
        modalProps={{ maskClosable: false, destroyOnHidden: true }}
    >
        <Divider orientation="left">基础信息</Divider>
        <ProFormGroup>
            <ProFormText name='uuid' disabled label='UUID' width='md'/>
            <ProFormSelect label="节点" rules={[{ required: true }]} name={["detail", "client"]} options={clients} request={onRequest} width='md' />
            <ProFormSelect label="是否 Root" rules={[{ required: true }]} name={["detail", "sudo"]} options={[{ "label": "True", "value": true }, { "label": "False", "value": false, }]}  width='md' />
            <ProFormText name='title' rules={[{ required: true }]} label='标题' fieldProps={{ maxLength: 20 }} width='md' />
            <ProFormText fieldProps={{ maxLength: 50 }} name='description' label='描述' width="md" />
            <div style={{ display: 'none'}}>
                <ProFormText name='type' label='描述'/>
            </div>
        </ProFormGroup>
        {record?.type === 'git' && <>
            <Divider orientation="left">Git</Divider>
            <ProFormGroup>
                <ProFormText name={["detail", "git_url"]} rules={[{ required: true }]} label='地址' width="md" />
                <ProFormText name={["detail", "git_branch"]} rules={[{ required: true }]} label='分支' width='md' />
                <ProFormSelect name={["detail", "git_clone_type"]} rules={[{ required: true }]} label='协议' width='md' options={["http/https"]} />
                <ProFormDigit name={["detail", "git_clone_depth"]} rules={[{ required: true }]} label='Depth' width='md' />
                <ProFormText name={["detail", "git_path"]} rules={[{ required: true }]} label='路径' width="md" />
                <ProFormText name={["detail", "git_user"]} rules={[{ required: true }]} label='帐号' width='md' />
                <ProFormText.Password name={["detail", "git_password"]} rules={[{ required: true }]} label='密码' width='md' />
            </ProFormGroup>
        </>}
        {record?.type === 'cmd' && <>
            <Divider orientation="left">命令</Divider>
            <ProFormTextArea fieldProps={{ rows: 10 }} name={["detail", "cmd"]} rules={[{ required: true }]} label='命令' width={690} />
        </>}
        {record?.type === 'status' && <>
            <Divider orientation="left">健康监测</Divider>
            <ProFormText name={["detail", "status_url"]} rules={[{ required: true }]} label='检测地址' width={690} />
        </>}

    </ModalForm>
})

export default EditNode;