import odooApi from '@/core/api/odooApi'
import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'
import useAuth from '@/core/hooks/useAuth'
import addressApi from '@/lib/address/api/addressApi'
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'
import { useEffect, useState } from 'react'
import { Controller, useForm } from 'react-hook-form'
import { toast } from 'react-hot-toast'

const CompanyProfile = () => {
  const auth = useAuth()
  const [isOpen, setIsOpen] = useState(false)
  const toggle = () => setIsOpen(!isOpen)
  const { register, setValue, control, handleSubmit } = useForm({
    defaultValues: {
      industry: '',
      companyType: '',
      name: '',
      taxName: '',
      npwp: ''
    }
  })

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

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

  useEffect(() => {
    const loadProfile = async () => {
      const dataProfile = await addressApi({ id: auth.parentId })
      setValue('name', dataProfile.name)
      setValue('industry', dataProfile.industryId)
      setValue('companyType', dataProfile.companyTypeId)
      setValue('taxName', dataProfile.taxName)
      setValue('npwp', dataProfile.npwp)
    }
    if (auth) loadProfile()
  }, [auth, setValue])

  const onSubmitHandler = async (values) => {
    const data = {
      ...values,
      company_type_id: values.companyType,
      industry_id: values.industry,
      tax_name: values.taxName
    }
    const isUpdated = await odooApi('PUT', `/api/v1/partner/${auth.parentId}`, data)
    if (isUpdated?.id) {
      setIsOpen(false)
      toast.success('Berhasil mengubah profil', { duration: 1500 })
      return
    }
    toast.error('Terjadi kesalahan internal')
  }

  return (
    <>
      <button
        type='button'
        onClick={toggle}
        className='p-4 flex items-center text-left'
      >
        <div>
          <div className='font-semibold mb-2'>Informasi Usaha</div>
          <div className='text-gray_r-11'>
            Dibawah ini adalah data usaha yang anda masukkan, periksa kembali data usaha anda.
          </div>
        </div>
        <div className='p-2 bg-gray_r-3 rounded'>
          {!isOpen && <ChevronDownIcon className='w-6' />}
          {isOpen && <ChevronUpIcon className='w-6' />}
        </div>
      </button>

      {isOpen && (
        <form
          className='p-4 border-t border-gray_r-6 flex flex-col gap-y-4'
          onSubmit={handleSubmit(onSubmitHandler)}
        >
          <div>
            <label className='block mb-3'>Klasifikasi Jenis Usaha</label>
            <Controller
              name='industry'
              control={control}
              render={(props) => (
                <HookFormSelect
                  {...props}
                  options={industries}
                />
              )}
            />
          </div>
          <div className='flex flex-wrap'>
            <div className='w-full mb-3'>Nama Usaha</div>
            <div className='w-3/12 pr-1'>
              <Controller
                name='companyType'
                control={control}
                render={(props) => (
                  <HookFormSelect
                    {...props}
                    options={companyTypes}
                  />
                )}
              />
            </div>
            <div className='w-9/12 pl-1'>
              <input
                {...register('name')}
                type='text'
                className='form-input'
                placeholder='Cth: Indoteknik Dotcom Gemilang'
              />
            </div>
          </div>
          <div>
            <label>Nama Wajib Pajak</label>
            <input
              {...register('taxName')}
              type='text'
              className='form-input mt-3'
            />
          </div>
          <div>
            <label>Nomor NPWP</label>
            <input
              {...register('npwp')}
              type='text'
              className='form-input mt-3'
            />
          </div>
          <button
            type='submit'
            className='btn-yellow w-full mt-2'
          >
            Simpan
          </button>
        </form>
      )}
    </>
  )
}

export default CompanyProfile