"use client";

import { Button } from "@/components/ui/button";
import EmailIcon from "@/shared/icons/emailIcon.svg";
import PasswordIcon from "@/shared/icons/passwordIcon.svg";
import { zodResolver } from "@hookform/resolvers/zod";
import { Controller, useForm } from "react-hook-form";
import { TSetPasswordFormData, setPasswordSchema } from "../schema";

const SetPasswordForm = () => {  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm<TSetPasswordFormData>({
    resolver: zodResolver(setPasswordSchema),
    defaultValues: {
      old_password: "",
      password: "",
    },
  });

  const handleSubmitForm = (data: TSetPasswordFormData) => {
    console.log(data)
  }

  return (
    <form onSubmit={handleSubmit(handleSubmitForm)}>
      <div className='flex flex-col gap-6'>
        <div className='flex flex-col gap-12'>
          <div className='flex flex-col gap-8'>
            {/* Old password filed */}
            <div className='flex flex-col gap-4'>
              <label htmlFor='old_password' className='text-neutral-white'>
                Old password
              </label>
              <div className='flex items-center gap-2 px-[20px] py-[12px] bg-neutral-white rounded-xl'>
                <EmailIcon />
                <Controller
                  control={control}
                  name='old_password'
                  render={({ field }) => (
                    <input
                      {...field}
                      type='password'
                      id='old_password'
                      placeholder='Please enter your old password'
                      className='focus-visible:outline-none w-full'
                    />
                  )}
                />
              </div>
              {errors.old_password && (
                <span className='text-red-500 text-sm'>{errors.old_password.message}</span>
              )}
            </div>
            {/* New password filed */}
            <div className='flex flex-col gap-4'>
              <label htmlFor='password' className='text-neutral-white'>
                New password
              </label>
              <div className='flex items-center gap-2 px-[20px] py-[12px] bg-neutral-white rounded-xl'>
                <PasswordIcon />
                <Controller
                  control={control}
                  name='password'
                  render={({ field }) => (
                    <input
                      {...field}
                      type='password'
                      id='password'
                      placeholder='Please enter your new password'
                      className='focus-visible:outline-none w-full'
                    />
                  )}
                />
              </div>
              {errors.password && (
                <span className='text-red-500 text-sm'>{errors.password.message}</span>
              )}
            </div>
          </div>
          <Button type="submit" className="cursor-pointer py-2.5 bg-main-color">Rest password</Button>
        </div>
      </div>
    </form>
  );
};

export default SetPasswordForm