/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect } from "react";
import {
  Modal,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Button,
  useDisclosure,
  Input,
} from "@nextui-org/react";
import { useForm, Controller } from "react-hook-form";
import { doFetch, putFetch } from "@/lib/doFetch";
import UploadImage from "./UploadImage";
import { BsPencilSquare } from "react-icons/bs";
import { useRouter } from "next/navigation";

export default function EditFolder({ refresh, data }) {
  const { isOpen, onOpen, onOpenChange } = useDisclosure();
  const router = useRouter();

  const {
    register,
    handleSubmit,
    control,
    setValue,
    formState: { errors },
  } = useForm({
    defaultValues: {
      poster: data?.poster,
      name: data?.name,
    },
  });

  useEffect(() => {
    if (data && isOpen === true) {
      setValue("poster", data.poster);
      setValue("name", data.name);
      console.log(data.name);
    }
  }, [data, isOpen]);

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

  const onSubmit = async (params) => {
    await putFetch({ url: "/api/folder/" + data?.id, params });
    await refresh();
  };

  return (
    <>
      <Button
        isIconOnly
        color="warning"
        variant="faded"
        aria-label="Take a photo"
        onPress={onOpen}
      >
        <BsPencilSquare style={{ fontSize: "18px" }} />
      </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>

                  <Controller
                    control={control}
                    rules={{
                      required: true,
                    }}
                    render={({ field: { onChange, onBlur, value } }) => (
                      <Input
                        isRequired
                        isClearable
                        type="text"
                        label="文件夹"
                        name="name"
                        onBlur={onBlur}
                        onValueChange={onChange}
                        value={value}
                      />
                    )}
                    name="name"
                  />
                </form>
              </ModalBody>
              <ModalFooter>
                <Button color="danger" variant="light" onPress={onClose}>
                  取消
                </Button>
                <Button
                  color="primary"
                  onPress={() => {
                    handleButtonClick(onClose);
                  }}
                >
                  提交
                </Button>
              </ModalFooter>
            </>
          )}
        </ModalContent>
      </Modal>
    </>
  );
}