path: root/src/lib/auth/components/CompanyProfile.jsx

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';
import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
import { yupResolver } from '@hookform/resolvers/yup';
import * as Yup from 'yup';
import SwitchAccount from '@/lib/auth/components/SwitchAccount';
import { Checkbox } from '@chakra-ui/react';

const CompanyProfile = () => {
  const [changeConfirmation, setChangeConfirmation] = useState(false);
  const [changeType, setChangeType] = useState(false);
  const [isChecked, setIsChecked] = useState(false);
  const [company_type, setCompany_type] = useState('nonpkp');
  const auth = useAuth();
  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => setIsOpen(!isOpen);
  const {
    register,
    formState: { errors },
    setValue,
    control,
    handleSubmit,
  } = useForm({
    resolver: yupResolver(validationSchema),
    defaultValues,
  });

  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?.company
          ? auth.parentId
            ? auth.parentId
            : auth.partnerId
          : auth.partnerId,
      });
      setCompany_type(dataProfile?.companyType);
      setValue('name', dataProfile?.name);
      setValue('industry', dataProfile?.industryId);
      setValue('companyType', dataProfile?.companyTypeId);
      setValue('taxName', dataProfile?.taxName);
      setValue('npwp', dataProfile?.npwp);
      setValue('alamat_wajib_pajak', dataProfile?.alamatWajibPajak);
      setValue('alamat_bisnis', dataProfile?.alamatBisnis);
      setValue('company_type', dataProfile?.companyType);
      setValue('email_bisnis', dataProfile.email);
      setValue('mobile_bisnis', dataProfile.mobile);
    };
    if (auth) loadProfile();
  }, [auth, setValue]);

  const onSubmitHandler = async (values) => {
    if (changeConfirmation) {
      const data = {
        ...values,
        id_user: auth.partnerId,
        company_type_id: values.companyType,
        industry_id: values.industry,
        tax_name: values.taxName,
        alamat_lengkap_text: values.alamat_wajib_pajak,
        street: values.alamat_bisnis,
        email: values.email_bisnis,
        mobile: values.mobile_bisnis,
      };
      const isUpdated = await odooApi(
        'PUT',
        `/api/v1/partner/${auth.parentId}`,
        data
      );
      if (isUpdated?.id) {
        toast.success('Berhasil mengubah profil', { duration: 1500 });
        return;
      }
      toast.error('Terjadi kesalahan internal');
    }
  };

  const handleConfirmSubmit = () => {
    setChangeConfirmation(false);
    handleSubmit(onSubmitHandler)();
  };
  const handleConfirmSubmitType = () => {
    setChangeType(false);
    setIsChecked(true);
    setIsOpen(!isOpen);
  };
  const handleChange = async () => {
    if (isChecked) {
      setIsChecked(!isChecked);
      setIsOpen(!isOpen);
    } else {
      setIsChecked(!isChecked);
      setChangeType(true);
    }
  };

  return (
    <>
      <BottomPopup
        active={changeType}
        close={() => setChangeType(false)} // Menutup popup
        title='Ubah type akun'
      >
        <div className='leading-7 text-gray_r-12/80'>
          Anda akan mengubah type akun anda?
        </div>
        <div className='flex mt-6 gap-x-4 md:justify-end'>
          <button
            className='btn-solid-red flex-1 md:flex-none'
            type='button'
            onClick={handleConfirmSubmitType}
          >
            Yakin
          </button>
          <button
            className='btn-light flex-1 md:flex-none'
            type='button'
            onClick={() => setChangeType(false)}
          >
            Batal
          </button>
        </div>
      </BottomPopup>
      <BottomPopup
        active={changeConfirmation}
        close={() => setChangeConfirmation(true)}
        title='Ubah profil Bisnis'
      >
        <div className='leading-7 text-gray_r-12/80'>
          Apakah anda yakin mengubah data bisnis?
        </div>
        <div className='flex mt-6 gap-x-4 md:justify-end'>
          <button
            className='btn-solid-red flex-1 md:flex-none'
            type='button'
            onClick={handleConfirmSubmit}
          >
            Ya, Ubah
          </button>
          <button
            className='btn-light flex-1 md:flex-none'
            type='button'
            onClick={() => setChangeConfirmation(false)}
          >
            Batal
          </button>
        </div>
      </BottomPopup>
      <div className='p-4 flex-row items-center text-left w-full'>
        {company_type === 'nonpkp' && (
          <div className='text-sm mb-2 flex items-center'>
            <Checkbox
              borderColor='gray.600'
              colorScheme='red'
              size='lg'
              isChecked={isChecked}
              onChange={handleChange}
            />
            <p className='ml-2'>Ubah ke akun PKP</p>
          </div>
        )}
        <div>
          <div className='font-semibold mb-2 flex flex-row gap-x-2'>
            <h2>Informasi Usaha</h2>
            <div className='badge-red'>{company_type.toUpperCase()}</div>
          </div>
          <div className='text-gray_r-11'>
            Dibawah ini adalah data usaha yang anda masukkan, periksa kembali
            data usaha anda.
          </div>
        </div>
        {/* <button
          onClick={toggle}
          className='btn-yellow w-full sm:w-fit sm:ml-auto min-w-[92px]'
        >
          Ubah
        </button> */}
      </div>
      {!isOpen && (
        <form
          className='p-4 border-t border-gray_r-6'
          onSubmit={(e) => {
            e.preventDefault();
            setChangeConfirmation(true);
          }}
        >
          <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
            <div>
              <label className='block mb-3'>Klasifikasi Jenis Usaha</label>
              <Controller
                name='industry'
                control={control}
                render={(props) => (
                  <HookFormSelect {...props} options={industries} />
                )}
              />
              <div className='text-caption-2 text-danger-500 mt-1'>
                {errors.industry?.message}
              </div>
            </div>
            <div className='flex flex-wrap'>
              <div className='w-full mb-3'>Badan Usaha</div>
              <div className='w-3/12 pr-1'>
                <Controller
                  name='companyType'
                  control={control}
                  render={(props) => (
                    <HookFormSelect {...props} options={companyTypes} />
                  )}
                />
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errors.companyType?.message}
                </div>
              </div>
              <div className='w-9/12 pl-1'>
                <input
                  {...register('name')}
                  type='text'
                  className='form-input'
                  placeholder='Cth: Indoteknik Dotcom Gemilang'
                />
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errors.name?.message}
                </div>
              </div>
            </div>
            <div>
              <label>Nama Wajib Pajak</label>
              <input
                {...register('taxName')}
                type='text'
                className='form-input mt-3'
              />
              <div className='text-caption-2 text-danger-500 mt-1'>
                {errors.taxName?.message}
              </div>
            </div>
            <div>
              <label>Email Bisnis</label>
              <input
                {...register('email_bisnis')}
                type='email'
                className='form-input mt-3'
              />
              <div className='text-caption-2 text-danger-500 mt-1'>
                {errors.email_bisnis?.message}
              </div>
            </div>
            <div>
              <label>No. Handphone Bisnis</label>
              <input
                {...register('mobile_bisnis')}
                type='tel'
                className='form-input mt-3'
              />
              <div className='text-caption-2 text-danger-500 mt-1'>
                {errors.mobile_bisnis?.message}
              </div>
            </div>
            <div>
              <label>Alamat Wajib Pajak</label>
              <input
                {...register('alamat_wajib_pajak')}
                type='text'
                className='form-input mt-3'
              />
              <div className='text-caption-2 text-danger-500 mt-1'>
                {errors.alamat_wajib_pajak?.message}
              </div>
            </div>
            <div>
              <label>Alamat Bisnis</label>
              <input
                {...register('alamat_bisnis')}
                type='text'
                className='form-input mt-3'
              />
              <div className='text-caption-2 text-danger-500 mt-1'>
                {errors.alamat_bisnis?.message}
              </div>
            </div>
            <div>
              <label>Nomor NPWP</label>
              <input
                {...register('npwp')}
                type='text'
                disabled
                className='form-input mt-3'
                maxLength={16}
              />
              <span className='text-xs opacity-60 text-red-500'>
                *Untuk mengganti NPWP bisa menghubungi kami{' '}
                <a
                  href='https://wa.me/6281717181922' target='_blank' rel='noreferrer'
                  style={{ textDecoration: 'underline' }}
                >
                  disini.
                </a>
              </span>
              <div className='text-caption-2 text-danger-500 mt-1'>
                {errors.npwp?.message}
              </div>
            </div>
          </div>
          <button type='submit' className='btn-yellow w-full mt-6'>
            Simpan
          </button>
        </form>
      )}
      {isOpen && <SwitchAccount company_type={company_type} />}
    </>
  );
};

export default CompanyProfile;

const validationSchema = Yup.object().shape({
  alamat_bisnis: Yup.string().required('Harus di-isi'),
  name: Yup.string().required('Harus di-isi'),
  email_bisnis: Yup.string().required('Harus di-isi'),
  mobile_bisnis: Yup.string().required('Harus di-isi'),
  industry: Yup.string().required('Harus di-pilih'),
  companyType: Yup.string().required('Harus di-pilih'),
  taxName: Yup.string(),
  npwp: Yup.string(),
  alamat_wajib_pajak: Yup.string(),
  company_type: Yup.string(),
  taxName: Yup.string().when('company_type', {
    is: (company_type) => company_type !== 'Non PKP',
    then: Yup.string().required('Harus di-isi'),
    otherwise: Yup.string().notRequired(),
  }),
  npwp: Yup.string().when('company_type', {
    is: (company_type) => company_type !== 'Non PKP',
    then: Yup.string().required('Harus di-isi'),
    otherwise: Yup.string().notRequired(),
  }),
  alamat_wajib_pajak: Yup.string().when('company_type', {
    is: (company_type) => company_type !== 'Non PKP',
    then: Yup.string().required('Harus di-isi'),
    otherwise: Yup.string().notRequired(),
  }),
});

const defaultValues = {
  industry: '',
  companyType: '',
  name: '',
  email_bisnis: '',
  mobile_bisnis: '',
  taxName: '',
  npwp: '',
  alamat_wajib_pajak: '',
  alamat_bisnis: '',
};