"use client";

import { FormBuilder } from "@/components/FormBuilder";
import { Form } from "@/components/ui/form";
import { useGlobal } from "@/context/global";
import { ConvertJSONToFormData, ServerRequest } from "@/lib/actions";
import { getUploadProjectFormFields } from "@/models/files";
import {
  getUploadProjectSchema,
  UploadProjectSchema,
} from "@/schemas/files/_uploadProject";
import createSubdomain from "@/services/projects/createSubdomain";
import { socket } from "@/socket";
import { zodResolver } from "@hookform/resolvers/zod";
import dayjs from "dayjs";
import { useTransition } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";

type UploadProjectFormProps<TData> = {};
export default function UploadProjectForm({}: UploadProjectFormProps<any>) {
  const { dict, closeModal } = useGlobal();

  const [isPending, startTransition] = useTransition();

  const form = useForm<UploadProjectSchema>({
    resolver: zodResolver(getUploadProjectSchema(dict)),
    mode: "onChange",
    defaultValues: {
      name: "",
      email: "",
      file: [],
      ready: true,
      note: "CS / CAP is missing",
    },
  });

  const onSubmit = async (values: UploadProjectSchema) => {
    let errors: string[] = [];

    if (!values["name"] || !values["file"]) {
      return toast.warning(dict.alerts.upload_project.fields_empty.title, {
        description: dict.alerts.upload_project.fields_empty.description,
      });
    }

    for (const error in form.formState.errors) {
      errors.push(
        `${error.replaceAll("-", " ")}: ${
          (form.formState.errors as any)[error].message
        }`,
      );
    }

    if (errors.length > 0) {
      return toast.warning(
        dict.alerts.upload_project.some_fields_invalid.title,
        {
          description: (
            <ul className="list-outside list-disc ps-4">
              {errors.map((e, i) => (
                <li key={i} className="capitalize">
                  {e}
                </li>
              ))}
            </ul>
          ),
        },
      );
    }

    if (values["file"][0].size > 100 * 1024 * 1024) {
      return toast.error(dict.alerts.upload_project.file_size.title, {
        description: dict.alerts.upload_project.file_size.description,
      });
    }

    startTransition(() => {
      const promise = () =>
        new Promise(async (resolve, reject) => {
          const formData = ConvertJSONToFormData({
            name: values["name"],
            email: values["email"] ?? "",
            ready: values["ready"],
            note: values["note"],
            file: values["file"][0],
          });

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

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

          socket.emit("add-project", {
            name: values["name"],
            email: values["email"] ?? "",
            ready: values["ready"],
            note: values["note"],
          });

          form.reset();

          return resolve(result);
        });

      toast.promise(promise, {
        loading: dict.alerts.upload_project.loading,
        description: dayjs().format("MMM DD, YYYY HH:MM:ss"),
        success: ({ message }: any) => (
          <div>
            <p>{message}</p>
            <p className="text-xs text-gray-500">
              {dict.alerts.upload_project.success_description}
            </p>
          </div>
        ),
        error: ({ message }: any) =>
          `${message}, ${dict.alerts.upload_project.some_error}`,
      });
    });
  };

  return (
    <>
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
          <FormBuilder
            form={form}
            elements={getUploadProjectFormFields({
              form,
              isPending,
              closeModal,
              dict,
            })}
            upperLabel
          />
        </form>
      </Form>
    </>
  );
}