import { ChangeEvent, useEffect, useMemo, useState } from "react";
import { useMutation } from "react-query";
import { useRegisterStore } from "../stores/useRegisterStore";
import { RegisterProps } from "~/types/auth";
import { registerUser } from "~/services/auth";
import { useRouter } from "next/router";
import { Checkbox, UseToastOptions, color, useToast } from "@chakra-ui/react";
import Link from "next/link";
import getFileBase64 from '@/core/utils/getFileBase64'
import { Controller, useForm } from 'react-hook-form'
import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'
import odooApi from "~/libs/odooApi";
import { toast } from 'react-hot-toast';

interface FormProps {
  type: string;
  required: boolean;
  isPKP: boolean;
}

interface industry_id {
  label: string;
  value: string;
  category: string;
}

interface companyType {
  value: string;
  label: string;
}

const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
  const {
    form,
    errors,
    updateForm,
    validate
  } = useRegisterStore()
  const { control, watch, setValue } = useForm();
  const [selectedCategory, setSelectedCategory] = useState<string>('');
  const [isChekBox, setIsChekBox] = useState<boolean>(false);

  const [industries, setIndustries] = useState<industry_id[]>([]);
  const [companyTypes, setCompanyTypes] = useState<companyType[]>([]);

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

  useEffect(() => {
    const loadCompanyTypes = async () => {
      const dataCompanyTypes = await odooApi('GET', '/api/v1/partner/company_type');
      setCompanyTypes(dataCompanyTypes?.map((o: { id: any; name: any; }) => ({ value: o.id, label: o.name })));
    };
    loadCompanyTypes();
  }, []);

  useEffect(() => {
    const selectedCompanyType = companyTypes.find(company => company.value === watch('companyType'));
    if (selectedCompanyType) {
      updateForm("company_type_id", `${selectedCompanyType?.value}`);
      validate();
    }
  }, [watch('companyType'), companyTypes]);

  useEffect(() => {
    const selectedIndustryType = industries.find(industry => industry.value === watch('industry_id'));
    if (selectedIndustryType) {
      updateForm("industry_id", `${selectedIndustryType?.value}`);
      setSelectedCategory(selectedIndustryType.category);
      validate();
    }
  }, [watch('industry_id'), industries]);

  useEffect(() => {
    const loadIndustries = async () => {
      const dataIndustries = await odooApi('GET', '/api/v1/partner/industry');
      setIndustries(dataIndustries?.map((o: { id: any; name: any; category: any; }) => ({ value: o.id, label: o.name, category: o.category })));
    };
    loadIndustries();
  }, []);

  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;
    updateForm('type_acc',`business`)
    updateForm('is_pkp',`${isPKP}`)
    updateForm(name, value);
    validate();
  };

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    setIsChekBox(!isChekBox)
  };

  useEffect(() => {
    if (isChekBox) {
      updateForm("isChekBox", 'true');
      validate();
    } else {
      updateForm("isChekBox", 'false');
      validate();
    }
  }, [isChekBox,]);

  const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {

    const toastProps: UseToastOptions = {
      duration: 5000,
      isClosable: true
    };
    let fileBase64 = '';
    const { name} = event.target;
    const file = event.target.files?.[0];
    if (file) {
      if (typeof file !== 'undefined') {
        if (file.size > 5000000) {
          toast({
            ...toastProps,
            title: 'Maksimal ukuran file adalah 5MB',
            status: 'warning'
          });
          return;
        }
        fileBase64 = await getFileBase64(file);
      }
      updateForm(name, fileBase64);
      validate();
    }
  };

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

  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
    };

    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='email' className="font-bold">Email Bisnis {!isPKP && !required && <span className='font-normal text-gray_r-11'>(opsional)</span>}</label>

        <input
          type='text'
          id='email_partner'
          name='email_partner'
          placeholder='example@email.com'
          value={!required ? form.email_partner : ''}
          className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
          disabled={required}
          contentEditable={required}
          readOnly={required}
          onChange={handleInputChange}
          autoComplete="username"
          aria-invalid={!required && isPKP && !!errors.email_partner}

        />

        {!required && isPKP && !!errors.email_partner && <span className="form-msg-danger">{errors.email_partner}</span>}
      </div>

      <div>
        <label className="font-bold" htmlFor="company">
          Nama Bisnis 
        </label>
        <div className="flex justify-between items-start gap-2 h-12">
          <div className='w-4/5 pr-1'>
            <Controller
              name='companyType'
              control={control}
              render={(props) => <HookFormSelect {...props} options={companyTypes} disabled={required} placeholder="Badan Usaha"/>}
              />
              {!required &&  !!errors.company_type_id && <span className="form-msg-danger">{errors.company_type_id}</span>}
          </div>
          <div className="w-[120%]">
            <input
              type="text"
              name="business_name"
              id="business_name"
              className="form-input h-full "
              placeholder="Nama Perusahaan"
              autoCapitalize="true"
              value={form.business_name}
              aria-invalid={!!errors.business_name}
              onChange={handleInputChange}
              />

            { !!errors.business_name && <span className="form-msg-danger">{errors.business_name}</span>}
          </div>
        </div>
      </div>

      <div className="mt-8 sm:mt-8">
        <label className="font-bold" htmlFor="business_name">
          Klasifikasi Jenis Usaha
        </label>
        <Controller
          name='industry_id'
          control={control}
          render={(props) => <HookFormSelect {...props} options={industries} disabled={required} placeholder={'Select industry'}/>}
          />
          {selectedCategory && 
            <span className='text-gray_r-11 text-xs'>Kategori : {selectedCategory}</span>
          }
          {!required && !!errors.industry_id && <span className="form-msg-danger">{errors.industry_id}</span>}
      </div>

      <div>
        <label htmlFor='alamat_bisnis' className="font-bold">Alamat Bisnis</label>

        <input
          type='text'
          id='alamat_bisnis'
          name='alamat_bisnis'
          placeholder='Masukan alamat bisnis anda'
          value={!required? form.alamat_bisnis : ''}
          className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
          disabled={required}
          contentEditable={required}
          readOnly={required}
          onChange={handleInputChange}
          aria-invalid={!required && !!errors.alamat_bisnis}
        />

        {!required && !!errors.alamat_bisnis && <span className="form-msg-danger">{errors.alamat_bisnis}</span>}
      </div>

      <div>
        <label htmlFor='nama_wajib_pajak' className="font-bold">Nama Wajib Pajak {!isPKP && !required && <span className='font-normal text-gray_r-11'>(opsional)</span>}</label>

        <input
          type='text'
          id='nama_wajib_pajak'
          name='nama_wajib_pajak'
          placeholder='Masukan nama lengkap anda'
          value={!required?  form.nama_wajib_pajak : ''}
          className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
          disabled={required}
          contentEditable={required}
          readOnly={required}
          onChange={handleInputChange}
          aria-invalid={isPKP && !required && !!errors.nama_wajib_pajak}
        />

        {isPKP && !required && !!errors.nama_wajib_pajak && <span className="form-msg-danger">{errors.nama_wajib_pajak}</span>}
      </div>

      <div>
        <label htmlFor='alamat_wajib_pajak' className="font-bold flex items-center">
          <p>
          Alamat Wajib Pajak {!isPKP && !required && <span className='font-normal text-gray_r-11'>(opsional)</span>}
          </p>  
          <div className="flex items-center ml-2 mt-1">
          <Checkbox
                borderColor='gray.600'
                colorScheme='red'
                size='md'
                isChecked={isChekBox}
                onChange={handleChange}
              />
              <span className='text-caption-2 ml-2 font-normal italic'>
                sama dengan alamat bisnis? 
              </span>
          </div> 
              </label>

        <input
          type='text'
          id='alamat_wajib_pajak'
          name='alamat_wajib_pajak'
          placeholder='Masukan alamat wajib pajak anda'
          value={!required? (isChekBox?form.alamat_bisnis : form.alamat_wajib_pajak)  : ''}
          className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
          disabled={isChekBox || required}
          contentEditable={required}
          readOnly={required}
          onChange={handleInputChange}
          aria-invalid={isPKP && !required && !!errors.alamat_wajib_pajak}
        />

        {isPKP && !required && !!errors.alamat_wajib_pajak && <span className="form-msg-danger">{errors.alamat_wajib_pajak}</span>}
      </div>

      <div>
        <label htmlFor='npwp' className="font-bold">Nomor NPWP {!isPKP && !required && <span className='font-normal text-gray_r-11'>(opsional)</span>}</label>

        <input
          type='tel'
          id='npwp'
          name='npwp'
          className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
          disabled={required}
          contentEditable={required}
          readOnly={required}
          placeholder='000.000.000.0-000.000'
          value={!required ? form.npwp : ''}
          maxLength={16}  // Set maximum length to 16 characters
          onChange={(e) => {
            if (!required) {
              const value = e.target.value.replace(/\D/g, ''); // Remove non-digit characters
              if (value.length <= 16) {
                handleInputChange(e);
              }
            }
          }}
          aria-invalid={!required && !!errors.npwp}
        />

        {!required && !!errors.npwp && <span className="form-msg-danger">{errors.npwp}</span>}
      </div>

      <div>
        <label htmlFor='sppkp' className="font-bold">Nomor SPPKP { !required && <span className='font-normal text-gray_r-11'>(opsional)</span>}</label>

        <input
          type='tel'
          id='sppkp'
          name='sppkp'
          className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
          disabled={required}
          contentEditable={required}
          readOnly={required}
          placeholder='000.000.000.0-000.000'
          value={!required ? form.sppkp : ''}
          aria-invalid={!required && !!errors.sppkp}
        />

        {!required && !!errors.sppkp && <span className="form-msg-danger">{errors.sppkp}</span>}
      </div>

      <div>
        <label htmlFor="npwp_document" className="font-bold">Dokumen NPWP {!isPKP && !required && <span className='font-normal text-gray_r-11'>(opsional)</span>}</label>

        <input
          type="file"
          id="npwp_document"
          name="npwp_document"
          className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
          disabled={required}
          contentEditable={required}
          readOnly={required}
          onChange={handleFileChange}
          accept=".pdf,.doc,.docx,.png,.jpg,.jpeg"  // Filter file types
        />

        {isPKP && !required && !!errors.npwp_document && <span className="form-msg-danger">{errors.npwp_document}</span>}
      </div>

      <div>
        <label htmlFor="sppkp_document" className="font-bold">Dokumen SPPKP {!isPKP && !required && <span className='font-normal text-gray_r-11'>(opsional)</span>}</label>

        <input
          type="file"
          id="sppkp_document"
          name="sppkp_document"
          className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
          disabled={required}
          contentEditable={required}
          readOnly={required}
          onChange={handleFileChange}
          accept=".pdf,.doc,.docx,.png,.jpg,.jpeg"  // Filter file types
        />

        {isPKP && !required && !!errors.sppkp_document && <span className="form-msg-danger">{errors.sppkp_document}</span>}
      </div>
    </form>
  )
}

export default form;
