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 teleponRef = useRef<HTMLDivElement>(null);

  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;
    updateForm(name, value);
    validate();
  };

  const mutation = useMutation({
    mutationFn: (data: RegisterProps) => registerUser(data),
  });

  useEffect(() => {
    const loadIndustries = async () => {
      const response = await mutation.mutateAsync(form);
      if (!response?.register) {
        // Logic to focus on first invalid input
        if (errors.email_partner && emailRef.current) {
          emailRef.current.focus();
          return;
        }
        if (errors.name && nameRef.current) {
          nameRef.current.focus();
          return;
        }

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

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

  const handleSubmit = async (e: ChangeEvent<HTMLFormElement>) => {
    e.preventDefault();

    const response = await mutation.mutateAsync(form);

    if (response?.register === true) {
      const urlParams = new URLSearchParams({
        activation: 'otp',
        email: form.email,
        redirect: (router.query?.next || '/') as string,
      });
      router.push(`${router.route}?${urlParams}`);
    }

    const toastProps: UseToastOptions = {
      duration: 5000,
      isClosable: true,
      position: 'top',
    };

    switch (response?.reason) {
      case 'EMAIL_USED':
        toast({
          ...toastProps,
          title: 'Email sudah digunakan',
          status: 'warning',
        });
        break;
      case 'NOT_ACTIVE':
        const activationUrl = `${router.route}?activation=email`;
        toast({
          ...toastProps,
          title: 'Akun belum aktif',
          description: (
            <>
              Akun sudah terdaftar namun belum aktif.{' '}
              <Link href={activationUrl} className='underline'>
                Klik untuk aktivasi akun
              </Link>
            </>
          ),
          status: 'warning',
        });
        break;
    }
  };

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

        <input
          type='text'
          id='name'
          name='name'
          className='form-input mt-3'
          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'
          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'
          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'
          ref={passwordRef}
          placeholder='08xxxxxxxx'
          value={form.phone}
          onChange={handleInputChange}
          aria-invalid={chekValid && !!errors.phone}
        />

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

export default Form;