import { useEffect } from "react";

import { useForm } from "react-hook-form";

// hooks
import useToast from "lib/hooks/useToast";
// services
import userService from "lib/services/user.service";
// ui
import { Input } from "ui";
// types
import { IUser } from "types";

const defaultValues: Partial<IUser> = {
  first_name: "",
  last_name: "",
  role: "",
};

type Props = {
  user?: IUser;
  setStep: React.Dispatch<React.SetStateAction<number>>;
};

const UserDetails: React.FC<Props> = ({ user, setStep }) => {
  const { setToastAlert } = useToast();

  const {
    register,
    handleSubmit,
    reset,
    formState: { errors, isSubmitting },
  } = useForm<IUser>({
    defaultValues,
  });

  const onSubmit = (formData: IUser) => {
    userService
      .updateUser(formData)
      .then(() => {
        setToastAlert({
          title: "User details updated successfully!",
          type: "success",
        });
        setStep(2);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  useEffect(() => {
    if (user)
      reset({
        first_name: user.first_name,
        last_name: user.last_name,
        role: user.role,
      });
  }, [user, reset]);

  return (
    <form className="grid w-full place-items-center" onSubmit={handleSubmit(onSubmit)}>
      <div className="w-full space-y-8 rounded-lg bg-white p-8 md:w-2/5">
        <div className="grid grid-cols-2 gap-4">
          <div>
            <Input
              label="First Name"
              name="first_name"
              placeholder="Enter first name"
              autoComplete="off"
              register={register}
              validations={{
                required: "First name is required",
              }}
              error={errors.first_name}
            />
          </div>
          <div>
            <Input
              label="Last Name"
              name="last_name"
              placeholder="Enter last name"
              autoComplete="off"
              register={register}
              validations={{
                required: "Last name is required",
              }}
              error={errors.last_name}
            />
          </div>
          <div className="col-span-2">
            <Input
              label="Role"
              name="role"
              placeholder="What is your role?"
              autoComplete="off"
              register={register}
              validations={{
                required: "Role is required",
              }}
              error={errors.role}
            />
          </div>
        </div>
        <div className="mx-auto h-1/4 lg:w-1/2">
          <button
            type="submit"
            className="w-full rounded-md bg-gray-200 px-4 py-2 text-sm"
            disabled={isSubmitting}
          >
            {isSubmitting ? "Updating..." : "Continue"}
          </button>
        </div>
      </div>
    </form>
  );
};

export default UserDetails;