import { FormBuilder } from "@/components/FormBuilder";
import { FormCard, FormContent } from "@/components/FormCard";
import { Form } from "@/components/ui/form";
import { useGlobal } from "@/context/global";
import { ServerRequest } from "@/lib/actions";
import { newUserFormFields } from "@/models/user";
import { getNewUserSchema, NewUserSchema } from "@/schemas/user/_newUser";
import { createUser } from "@/services/users";
import { socket } from "@/socket";
import { faUserCircle } from "@fortawesome/free-regular-svg-icons";
import { zodResolver } from "@hookform/resolvers/zod";
import { useState, useTransition } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import NewUserFormInfo from "./info";

export default function NewUserForm() {
  const { dict, closeModal } = useGlobal();

  const [isPending, startTransition] = useTransition();

  const [formInfo, setFormInfo] = useState<React.ReactNode>();

  const form = useForm<NewUserSchema>({
    resolver: zodResolver(getNewUserSchema(dict)),
    mode: "onChange",
    defaultValues: {
      email: "",
      name: "",
      permissions: "",
    },
  });

  const onSubmit = (values: NewUserSchema) => {
    startTransition(() => {
      const promise = new Promise(async (resolve, reject) => {
        const formData = new FormData();

        formData.append("name", values.name);
        formData.append("email", values.email);
        formData.append("permission", values.permissions);

        const result = await ServerRequest(createUser(formData));

        if (!result.operation) {
          form.reset();
          return reject(result);
        }

        socket.emit("add-user", result.data);

        form.reset();
        resolve(result);
      });

      toast.promise(promise, {
        loading: dict.alerts.create_profile.loading,
        success: ({ message }) => message,
        error: ({ message }) => message,
      });
    });
  };

  const handleTogglePermissionsSection = () =>
    setFormInfo((prev) =>
      prev ? undefined : <NewUserFormInfo {...{ form, setFormInfo }} />,
    );

  return (
    <FormCard>
      <FormContent
        title={dict.pages.users.form.new.title}
        subtitle={dict.pages.users.form.new.subtitle}
        icon={faUserCircle}
      >
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)}>
            <FormBuilder
              form={form}
              elements={newUserFormFields({
                dict,
                handleTogglePermissionsSection,
                isPending,
                closeModal,
              })}
              upperLabel
            />
          </form>
        </Form>
      </FormContent>
      {formInfo}
    </FormCard>
  );
}