"use client";
import InputGroup from "@/components/FormElements/InputGroup";
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
import FormFooter from "@/components/ui/FormFooter";
import { FormErrorMessages } from "@/constants/Texts";
import { ICreateAdminCredentials } from "@/lib/api";
import { FC } from "react";
import useCreateAdminPresenter from "./useCreateAdminPresenter";
interface IProps {
  editMode?: boolean;
  defaultValues?: ICreateAdminCredentials;
  id?: string;
}
const CreateAdminForm: FC<IProps> = ({ defaultValues, editMode, id }) => {
  const { errors, handleSubmit, register, router, onSubmit } =
    useCreateAdminPresenter({
      editMode,
      defaultValues,
      id,
    });

  return (
    <form
      className="grid grid-cols-1 gap-9"
      onSubmit={handleSubmit((data) => {
        onSubmit(data);
      })}
    >
      <div className="flex flex-col gap-9">
        <ShowcaseSection
          title="Input Fields"
          className="grid grid-cols-2 gap-5"
        >
          <div>
            <InputGroup
              {...register("full_name", {
                required: { message: FormErrorMessages.required, value: true },
                minLength: {
                  value: 5,
                  message: FormErrorMessages.minLength(5),
                },
                maxLength: {
                  value: 100,
                  message: FormErrorMessages.maxLength(100),
                },
              })}
              label="Full name"
              placeholder="Full name"
              required
              type="text"
              name="full_name"
            />
            {errors.full_name && (
              <p className="mt-1 text-sm text-red-500">
                {errors.full_name.message}
              </p>
            )}
          </div>

          <div>
            <InputGroup
              label="Username"
              placeholder="Username"
              autoComplete="off"
              required
              type="text"
              {...register("username", {
                required: {
                  value: true,
                  message: FormErrorMessages.required,
                },
                pattern: {
                  value: /^[a-zA-Z0-9]+$/,
                  message: FormErrorMessages.alphaNumeric,
                },
                minLength: {
                  value: 3,
                  message: FormErrorMessages.minLength(3),
                },
                maxLength: {
                  value: 30,
                  message: FormErrorMessages.maxLength(30),
                },
              })}
              name="username"
            />
            {errors.username && (
              <p className="mt-1 text-sm text-red-500">
                {errors.username.message}
              </p>
            )}
          </div>

          <div>
            <InputGroup
              label="Email"
              autoComplete="off"
              placeholder="Email"
              type="email"
              required
              {...register("email", {
                required: {
                  value: true,
                  message: FormErrorMessages.required,
                },
                pattern: {
                  value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
                  message: FormErrorMessages.invalidEmail,
                },
              })}
              name="email"
            />
            {errors.email && (
              <p className="mt-1 text-sm text-red-500">
                {errors.email.message}
              </p>
            )}
          </div>
          {!editMode && (
            <div>
              <InputGroup
                label="Password"
                placeholder="Password"
                autoComplete="new-password"
                required
                type="password"
                {...register("password", {
                  required: {
                    value: true,
                    message: FormErrorMessages.required,
                  },
                  minLength: {
                    value: 8,
                    message: FormErrorMessages.minLength(8),
                  },
                  maxLength: {
                    value: 128,
                    message: FormErrorMessages.maxLength(128),
                  },
                })}
                name="password"
              />
              {errors.password && (
                <p className="mt-1 text-sm text-red-500">
                  {errors.password.message}
                </p>
              )}
            </div>
          )}

          <div>
            <InputGroup
              label="Phone"
              placeholder="Phone"
              type="text"
              {...register("phone", {
                minLength: {
                  value: 10,
                  message: FormErrorMessages.minLength(10),
                },
                maxLength: {
                  value: 20,
                  message: FormErrorMessages.maxLength(20),
                },
              })}
              name="phone"
            />
            {errors.phone && (
              <p className="mt-1 text-sm text-red-500">
                {errors.phone.message}
              </p>
            )}
          </div>

          <div>
            <InputGroup
              label="Department"
              placeholder="Department"
              type="text"
              {...register("department", {
                minLength: {
                  value: 2,
                  message: FormErrorMessages.minLength(2),
                },
                maxLength: {
                  value: 100,
                  message: FormErrorMessages.maxLength(100),
                },
              })}
              name="department"
            />
            {errors.department && (
              <p className="mt-1 text-sm text-red-500">
                {errors.department.message}
              </p>
            )}
          </div>

          <div>
            <InputGroup
              label="Position"
              placeholder="Position"
              type="text"
              {...register("position", {
                minLength: {
                  value: 2,
                  message: FormErrorMessages.minLength(2),
                },
                maxLength: {
                  value: 100,
                  message: FormErrorMessages.maxLength(100),
                },
              })}
              name="position"
            />
            {errors.position && (
              <p className="mt-1 text-sm text-red-500">
                {errors.position.message}
              </p>
            )}
          </div>

          <div>
            <InputGroup
              type="file"
              fileStyleVariant="style1"
              label="Attach file"
              placeholder="Attach file"
              register={register}
              name="profile_image"
            />
            {errors.profile_image && (
              <p className="mt-1 text-sm text-red-500">
                {errors.profile_image.message as string}
              </p>
            )}
          </div>

          <FormFooter />
        </ShowcaseSection>
      </div>
    </form>
  );
};

export default CreateAdminForm;