"use client";
import Loading from "@/app/loading";
import InputGroup from "@/components/FormElements/InputGroup";
import { Select } from "@/components/FormElements/select";
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
import FormFooter from "@/components/ui/FormFooter";
import { AdminRoles } from "@/constants/enums";
import { REGEX } from "@/constants/regex";
import { FormErrorMessages } from "@/constants/Texts";
import { useProfileQuery, useUpdateProfileQuery } from "@/hooks/queries";
import { TUpdateProfileCredentials, UpdateProfileCredentials } from "@/lib/api";
import { getEnumAsArray } from "@/utils/shared";
import { useEffect } from "react";
import { useForm } from "react-hook-form";
import { ZodSafeParseResult } from "zod";

export default function SettingsPage() {
  const { data, isLoading } = useProfileQuery();
  const { mutate } = useUpdateProfileQuery();
  const { register, reset, handleSubmit } = useForm<TUpdateProfileCredentials>({
    mode: "onChange",
    defaultValues: data,
  });

  useEffect(() => {
    if (data) {
      reset(data);
    }
  }, [data, reset]);
  const updateUser = (data: TUpdateProfileCredentials) => {
    const validation: ZodSafeParseResult<TUpdateProfileCredentials> =
      UpdateProfileCredentials.safeParse(data);
    if (validation.success) {
      mutate({ credentials: validation.data });
    } else {
      console.error(validation.error);
    }
  };
  if (isLoading) return <Loading />;
  return (
    <ShowcaseSection title="Update Profile">
      <form
        className="grid grid-cols-2 gap-2"
        onSubmit={handleSubmit(updateUser)}
      >
        <InputGroup
          {...register("full_name", {
            minLength: {
              value: 2,
              message: FormErrorMessages.minLength(2),
            },
            maxLength: {
              value: 100,
              message: FormErrorMessages.maxLength(100),
            },
          })}
          label="Full name"
          name="full_name"
          placeholder="Full name"
          type="text"
          className="col-span-1"
        />
        <InputGroup
          {...register("username", {
            minLength: {
              value: 3,
              message: FormErrorMessages.minLength(3),
            },
            maxLength: {
              value: 30,
              message: FormErrorMessages.maxLength(30),
            },
            pattern: {
              value: REGEX.USERNAME,
              message: FormErrorMessages.invalidPattern,
            },
          })}
          label="Username"
          className="col-span-1"
          name="username"
          placeholder="Username"
          type="text"
        />
        <InputGroup
          {...register("email", {
            pattern: {
              value: REGEX.EMAIL,
              message: FormErrorMessages.invalidEmail,
            },
          })}
          label="Email"
          className="col-span-1"
          name="email"
          placeholder="Email"
          type="email"
        />
        <InputGroup
          {...register("phone", {
            minLength: {
              value: 10,
              message: FormErrorMessages.minLength(10),
            },
            maxLength: {
              value: 20,
              message: FormErrorMessages.maxLength(20),
            },
            pattern: {
              value: REGEX.PHONE,
              message: FormErrorMessages.invalidPattern,
            },
          })}
          label="Phone"
          className="col-span-1"
          name="phone"
          placeholder="Phone"
          type="text"
        />
        <InputGroup
          {...register("department", {
            minLength: {
              value: 2,
              message: FormErrorMessages.minLength(2),
            },
            maxLength: {
              value: 100,
              message: FormErrorMessages.maxLength(100),
            },
          })}
          label="Department"
          className="col-span-1"
          name="department"
          placeholder="Department"
          type="text"
        />
        <InputGroup
          {...register("position", {
            minLength: {
              value: 2,
              message: FormErrorMessages.minLength(2),
            },
            maxLength: {
              value: 100,
              message: FormErrorMessages.maxLength(100),
            },
          })}
          label="Position"
          className="col-span-1"
          name="position"
          placeholder="position"
          type="text"
        />
        <Select
          label="Role"
          {...register("role", {
            required: { message: FormErrorMessages.required, value: true },
          })}
          name="role"
          items={getEnumAsArray(AdminRoles)}
          placeholder="Select Role"
        />
        <FormFooter />
      </form>
    </ShowcaseSection>
  );
}
