import { ChangeEvent, useMemo, useEffect, useRef, useState } from 'react';
import { useMutation } from 'react-query';
import { useRegisterStore } from '../stores/useRegisterStore';
import { RegisterProps } from '~/types/auth';
import { registerUser } from '~/services/auth';
import TermCondition from './TermCondition';
import FormCaptcha from './FormCaptcha';
import { useRouter } from 'next/router';
import { UseToastOptions, useToast } from '@chakra-ui/react';
import Link from 'next/link';

interface FormProps {
  type: string;
  required: boolean;
  isBisnisRegist: boolean;
  chekValid: boolean;
  buttonSubmitClick: boolean;
}

const Form: React.FC<FormProps> = ({
  type,
  required,
  isBisnisRegist = false,
  chekValid,
  buttonSubmitClick,
}) => {
  const { form, isCheckedTNC, isValidCaptcha, errors, updateForm, validate } =
    useRegisterStore();
  const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]);

  const router = useRouter();
  const toast = useToast();

  const emailRef = useRef<HTMLInputElement>(null);
  const nameRef = useRef<HTMLInputElement>(null);
  const passwordRef = useRef<HTMLInputElement>(null);
  const phoneRef = useRef<HTMLInputElement>(null);

  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;
    updateForm(name, value);
    validate();
  };
  useEffect(() => {
    const loadIndustries = async () => {
      if (!isFormValid) {
        const options: ScrollIntoViewOptions = {
          behavior: 'smooth',
          block: 'center',
        };

        if (errors.email_partner && emailRef.current) {
          emailRef.current.scrollIntoView(options);
          return;
        }
        if (errors.name && nameRef.current) {
          nameRef.current.scrollIntoView(options);
          return;
        }

        if (errors.password && passwordRef.current) {
          passwordRef.current.scrollIntoView(options);
          return;
        }

        if (errors.phone && phoneRef.current) {
          phoneRef.current.scrollIntoView(options);
          return;
        }
      }
    };
    loadIndustries();
  }, [buttonSubmitClick, chekValid]);

  return (
    <form className='mt-6 grid grid-cols-1 gap-y-4'>
      <div>
        <label htmlFor='name' className='text-black font-bold'>
          Nama Lengkap
        </label>

        <input
          type='text'
          id='name'
          name='name'
          className='form-input mt-3 transition-all duration-700'
          placeholder='Masukan nama lengkap anda'
          value={form.name}
          ref={nameRef}
          onChange={handleInputChange}
          aria-invalid={chekValid && !!errors.name}
        />

        {chekValid && !!errors.name && (
          <span className='form-msg-danger'>{errors.name}</span>
        )}
      </div>

      <div>
        <label htmlFor='email' className='text-black font-bold'>
          Alamat Email
        </label>

        <input
          type='text'
          id='email'
          name='email'
          className='form-input mt-3 transition-all duration-500'
          placeholder='Masukan alamat email anda'
          value={form.email}
          ref={emailRef}
          onChange={handleInputChange}
          autoComplete='username'
          aria-invalid={chekValid && !!errors.email}
        />

        {chekValid && !!errors.email && (
          <span className='form-msg-danger'>{errors.email}</span>
        )}
      </div>

      <div>
        <label htmlFor='password' className='text-black font-bold'>
          Kata Sandi
        </label>
        <input
          type='password'
          name='password'
          id='password'
          className='form-input mt-3 transition-all duration-500'
          placeholder='••••••••••••'
          value={form.password}
          ref={passwordRef}
          onChange={handleInputChange}
          autoComplete='current-password'
          aria-invalid={chekValid && !!errors.password}
        />

        {chekValid && !!errors.password && (
          <span className='form-msg-danger'>{errors.password}</span>
        )}
      </div>

      <div>
        <label htmlFor='phone' className='text-black font-bold'>
          No Handphone
        </label>

        <input
          type='tel'
          id='phone'
          name='phone'
          className='form-input mt-3 transition-all duration-500'
          placeholder='08xxxxxxxx'
          value={form.phone}
          ref={phoneRef}
          onChange={handleInputChange}
          aria-invalid={chekValid && !!errors.phone}
        />

        {chekValid && !!errors.phone && (
          <span className='form-msg-danger'>{errors.phone}</span>
        )}
      </div>
    </form>
  );
};

export default Form;