import { Button, Form, Input, message } from "antd";
import { useEffect } from "react";
import { mRequest } from "@/app/_lib/request";

export default function EditIconContent({
  item,
  onRefresh,
}: {
  item:  | null;
  onRefresh: () => void;
}) {
  const [form] = Form.useForm();
  console.log(item);

  useEffect(() => {
    if (item) {
      form.setFieldsValue({ ...item });
    } else {
      form.resetFields();
    }
  }, [item, form]);
  return (
    <Form
      layout="vertical"
      form={form}
      initialValues={{
        // ...item,
        // name: "",
        // icons: [],
        // link: "",
      }}
      onFinish={(res) => {
        console.log(res);
        mRequest(item ? "PUT" : "POST", "/app/linkIcon", {
          data: item ? { id: item.id, ...res } : res,
          returnType: "text",
        }).then(() => {
          message.success((item ? "修改" : "新增") + "成功");
          onRefresh();
        });
      }}
    >
      <Form.Item
        label="名称"
        name="name"
        rules={[{ required: true, message: "名称必填" }]}
      >
        <Input />
      </Form.Item>
      {
        !item ?
          <>
            <Form.Item
              label="链接名称"
              name="linkName"
              rules={[{ required: true, message: "链接必填" }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="链接标签"
              name="linkTag"
              rules={[{ required: true, message: "链接必填" }]}
            >
              <Input />
            </Form.Item>
          </> : ''

      }


      <Form.Item className="flex justify-end">
        <Button type="primary" htmlType="submit">
          确认{item ? "修改" : "添加"}
        </Button>
      </Form.Item>
    </Form>
  );
}