import React from "react";
import {
  Modal,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Button,
  useDisclosure,
  Input,
  Avatar,
} from "@nextui-org/react";
import { AiFillPlusSquare } from "react-icons/ai";
import { useForm } from "react-hook-form";
import { doFetch } from "@/lib/doFetch";
import UploadImage from "./UploadImage";

export default function AddFolder(refresh) {
  const { isOpen, onOpen, onOpenChange } = useDisclosure();
  const { register, handleSubmit, control, setValue } = useForm();

  const handleButtonClick = async (close) => {
    // 手动触发表单提交
    handleSubmit(onSubmit)();
    await refresh();

    close();
  };

  const onSubmit = async (data) => {
    // 提交表单数据
    let res = await doFetch({ url: "/api/folder", params: data });
  };

  return (
    <>
      <Button
        radius="full"
        className="bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg mb-4"
        onPress={onOpen}
      >
        <AiFillPlusSquare />
        添加文件夹
      </Button>
      <Modal
        isOpen={isOpen}
        backdrop={"blur"}
        onOpenChange={onOpenChange}
        motionProps={{
          variants: {
            enter: {
              y: 0,
              opacity: 1,
              transition: {
                duration: 0.3,
                ease: "easeOut",
              },
            },
            exit: {
              y: -20,
              opacity: 0,
              transition: {
                duration: 0.2,
                ease: "easeIn",
              },
            },
          },
        }}
      >
        <ModalContent>
          {(onClose) => (
            <>
              <ModalHeader className="flex flex-col gap-1">
                添加文件夹
              </ModalHeader>
              <ModalBody>
                <form action="">
                  <input type="hidden" {...register("poster")} />
                  <div className="flex justify-center items-center flex-col mb-8">
                    <UploadImage
                      control={control}
                      setValue={setValue}
                    ></UploadImage>
                  </div>

                  <Input
                    type="text"
                    label="文件夹"
                    name="name"
                    {...register("name", { required: true, maxLength: 20 })}
                  />
                </form>
              </ModalBody>
              <ModalFooter>
                <Button color="danger" variant="light" onPress={onClose}>
                  取消
                </Button>
                <Button
                  color="primary"
                  onPress={() => {
                    handleButtonClick(onClose);
                  }}
                >
                  提交
                </Button>
              </ModalFooter>
            </>
          )}
        </ModalContent>
      </Modal>
    </>
  );
}