// import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
// import cityApi from '@/lib/address/api/cityApi';
// import stateApi from '@/lib/address/api/stateApi.js';
// import districtApi from '@/lib/address/api/districtApi';
// import subDistrictApi from '@/lib/address/api/subDistrictApi';
// import { yupResolver } from '@hookform/resolvers/yup';
// import React, {
//   useEffect,
//   useRef,
//   useState,
//   forwardRef,
//   useImperativeHandle,
// } from 'react';
// import ReCAPTCHA from 'react-google-recaptcha';
// import { Controller, useForm } from 'react-hook-form';
// import { toast } from 'react-hot-toast';
// import * as Yup from 'yup';
// import createMerchantApi from '../api/createMerchantApi';
// import getMerchantApi from '../api/getMerchantApi';
// import addressApi from '@/lib/address/api/addressApi';
// import PageContent from '@/lib/content/components/PageContent';
// import { useRouter } from 'next/router';
// import useAuth from '@/core/hooks/useAuth';
// import { Radio, RadioGroup, Stack, Checkbox, Button } from '@chakra-ui/react';
// import { EyeIcon } from '@heroicons/react/24/outline';
// import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
// import Image from 'next/image';
// import ImageBanner from '~/components/ui/image';
// import { ChevronRightIcon } from '@heroicons/react/24/outline';
// import MobileView from '@/core/components/views/MobileView';
// import DesktopView from '@/core/components/views/DesktopView';
// import getFileBase64 from '@/core/utils/getFileBase64';
// import odooApi from '~/libs/odooApi';
// import { formatValue } from 'react-currency-input-field';
// const InformasiVendor = forwardRef(({ handleIsError, isKonfirmasi }, ref) => {
//   const isError = (value) => {
//     // Logika menentukan error
//     const result = value ? true : false;
//     handleIsError(result); // Panggil handleIsError dari Merchant
//     return result;
//   };
//   const {
//     register,
//     handleSubmit,
//     formState: { errors },
//     control,
//     reset,
//     watch,
//     setValue,
//     getValues,
//   } = useForm({
//     resolver: yupResolver(validationSchema),
//     defaultValues,
//   });
//   const [categoryProduk, setCategoryProduk] = useState([]);
//   const [isExample, setIsExample] = useState(false);

//   const router = useRouter();

//   const auth = useAuth();
//   if (auth == false) {
//     router.push(`/login?next=${encodeURIComponent('/daftar-merchant')}`);
//   }
//   const dataTerhitungSejak = [
//     { value: 1, label: 'Terima PO' },
//     { value: 2, label: 'Barang Dikirimkan' },
//     { value: 3, label: 'Tukar Faktur' },
//   ];

//   const dataTempo = [
//     { value: 24, label: 'Tempo 14 Hari' },
//     { value: 25, label: 'Tempo 30 Hari' },
//     { value: 28, label: 'Tempo 60 Hari' },
//     { value: 31, label: 'Tempo 90 Hari' },
//   ];

//   const midIndex = Math.ceil(categoryProduk.length / 2);
//   const firstColumn = categoryProduk.slice(0, midIndex);
//   const secondColumn = categoryProduk.slice(midIndex);
//   const [kreditLimitFormat, setKreditLimitFormat] = useState();

//   useEffect(() => {
//     const loadData = async () => {
//       const data = await getMerchantApi();
//       if (data) {
//         reset({
//           hargaTayang: data.hargaTayang || '',
//           categoryProduk: data.categoryProduk || '',
//           merkDagang: data.merkDagang || '',
//           isPengajuanTempo: data.isPengajuanTempo || '',
//           tempoDuration: parseInt(data.tempoDuration) || '',
//           // kreditLimit: parseInt(data.kreditLimit) || '',
//           waktuPengiriman: data.waktuPengiriman || '',
//           terhitungSejak: parseInt(data.terhitungSejak) || '',
//         });
//         handleKreditLimitChange(data.kreditLimit || '');
//         setSelectedIds(watch('categoryProduk').split(',').map(Number));
//       }
//     };

//     loadData();
//   }, []);

//   useImperativeHandle(ref, () => () => {
//     handleSubmit(onSubmitHandler)();
//   });

//   const handleKreditLimitChange = (e) => {
//     let value = e.target?.value ? e.target.value : e;

//     // Hapus semua karakter non-numeric
//     value = value.replace(/[^\d]/g, '');

//     // Format angka sebagai Rupiah tanpa mengubah nilai sebenarnya
//     const formattedValue1 = formatValue({
//       value: value,
//       groupSeparator: '.',
//       decimalSeparator: ',',
//       prefix: 'Rp ',
//     });

//     setKreditLimitFormat(formattedValue1);
//     setValue('kreditLimit', formattedValue1);
//   };

//   const [selectedIds, setSelectedIds] = useState(
//     watch('categoryProduk')
//       ? watch('categoryProduk').split(',').map(Number)
//       : []
//     // form.categoryProduk ? form.categoryProduk.split(',').map(Number) : [] // Parse string menjadi array angka
//     // [] // Parse string menjadi array angka
//   );
//   const handleCheckboxChange = (id) => {
//     const updatedSelected = selectedIds.includes(id)
//       ? selectedIds.filter((selectedId) => selectedId !== id)
//       : [...selectedIds, id];

//     setSelectedIds(updatedSelected);

//     // Mengubah array kembali menjadi string yang dipisahkan oleh koma
//     setValue('categoryProduk', updatedSelected.join(','));
//   };

//   const isChecked = (id) => selectedIds.includes(id);

//   const handleCheckboxPortalChange = (value) => {
//     setValue('isPengajuanTempo', `${value}`);
//   };

//   useEffect(() => {
//     if (!isKonfirmasi) {
//       window.scrollTo({
//         top: 0,
//         behavior: 'smooth',
//       });
//     }
//   }, []);

//   useEffect(() => {
//     const loadCategories = async () => {
//       let dataCategories = await odooApi('GET', '/api/v1/category/tree');
//       const formattedCategories = dataCategories.map((category) => ({
//         id: category.id,
//         name: category.name,
//       }));
//       // Simpan hasil ke state
//       setCategoryProduk(formattedCategories);
//     };
//     loadCategories();
//   }, []);

//   const onSubmitHandler = async (values) => {
//     const toastId = toast.loading('Mengirimkan formulir merchant...');
//     const data = {
//       harga_tayang: values.hargaTayang,
//       categoryProduk: values.categoryProduk,
//       merk_dagang: values.merkDagang,
//       is_pengajuan_tempo: values.isPengajuanTempo,
//       tempo_duration: values.tempoDuration,
//       kredit_limit: values.kreditLimit,
//       waktu_pengiriman: values.waktuPengiriman,
//       terhitung_sejak: values.terhitungSejak,
//     };
//     const create_leads = await createMerchantApi({ data });
//     if (create_leads) {
//       toast.dismiss(toastId);
//       isError(false);
//       toast.success('Berhasil menambahkan data');
//       reset();
//       // router.push('/+');
//     } else {
//       toast.dismiss(toastId);
//       toast.error('Gagal menambahkan data');
//     }
//   };

//   // const DownLoadSurat = () => {
//   //   download surat dari /public/file/Surat Pernyataan Nomor Rekening.docx
//   // };

//   if (!auth) {
//     return;
//   }

//   return (
//     <>
//       <BottomPopup
//         className=''
//         title='Contoh SPPKP'
//         active={isExample}
//         close={() => setIsExample(false)}
//       >
//         <div className='flex p-2'>
//           <Image
//             src='/images/NO-SPPKP-FORMAT-TEMPLATE.jpg'
//             alt='Contoh SPPKP'
//             className='w-full h-full '
//             width={800}
//             height={800}
//             quality={85}
//           />
//         </div>
//       </BottomPopup>
//       <DesktopView>
//         <div className='container flex flex-col items-star py-4 '>
//           <h2 className='text-xs md:text-title-sm font-semibold mb-6'>
//             Informasi Vendor
//           </h2>

//           <div className='w-full mt-4'>
//             <form
//               onSubmit={handleSubmit(onSubmitHandler)}
//               className='flex flex-col gap-4'
//             >
//               <div className='w-full flex flex-row'>
//                 <div className='w-2/5'>
//                   <label className='form-label  text-nowrap'>
//                     Harga Tayang (HET){' '}
//                     <span className=' opacity-60'>(Opsional)</span>
//                   </label>
//                 </div>
//                 <div className='w-3/5'>
//                   <textarea
//                     {...register('hargaTayang')}
//                     placeholder='Jelaskan detail HET yang anda miliki'
//                     type='textarea'
//                     className='form-input'
//                   />
//                   <div className='text-caption-2 text-danger-500 mt-1'>
//                     {errors.hargaTayang?.message}
//                   </div>
//                 </div>
//               </div>

//               <div className={`flex flex-row  justify-between items-start`}>
//                 <div className='w-2/5 text-nowrap'>
//                   <label
//                     className={`form-label ${isKonfirmasi && 'text-wrap'}`}
//                   >
//                     Tipe Kategori Produk yang Digunakan
//                   </label>
//                   {!isKonfirmasi && (
//                     <span className='text-xs opacity-60'>
//                       Pilih kategori produk bisa lebih dari 1
//                     </span>
//                   )}
//                 </div>
//                 <div className='w-3/5 flex flex-col'>
//                   <div className='flex flex-row justify-between gap-2'>
//                     <div
//                       className='flex flex-col gap-2'
//                       //   ref={categoryProdukRef}
//                     >
//                       {firstColumn.map((item) => (
//                         <Checkbox
//                           colorScheme='red'
//                           key={item.id}
//                           onChange={() => handleCheckboxChange(item.id)}
//                           isChecked={isChecked(item.id)}
//                         >
//                           {item.name}
//                         </Checkbox>
//                       ))}
//                     </div>
//                     <div className='flex flex-col gap-2 '>
//                       {secondColumn.map((item) => (
//                         <Checkbox
//                           colorScheme='red'
//                           key={item.id}
//                           isChecked={isChecked(item.id)}
//                           onChange={() => handleCheckboxChange(item.id)}
//                         >
//                           {item.name}
//                         </Checkbox>
//                       ))}
//                     </div>
//                   </div>
//                   <div className='text-caption-2 text-danger-500 mt-1'>
//                     {errors.categoryProduk?.message}
//                   </div>
//                 </div>
//               </div>

//               <div className='w-full flex flex-row'>
//                 <div className='w-2/5'>
//                   <label className='form-label  text-nowrap'>Merk Dagang</label>
//                 </div>
//                 <div className='w-3/5'>
//                   <input
//                     {...register('merkDagang')}
//                     placeholder='Merk 1, Merk 2, Merk 3'
//                     type='text'
//                     className='form-input'
//                   />
//                   <div className='text-caption-2 text-danger-500 mt-1'>
//                     {errors.merkDagang?.message}
//                   </div>
//                 </div>
//               </div>

//               <div className='flex flex-row justify-between items-start'>
//                 <div className='w-2/5'>
//                   <label className='form-label  text-wrap '>
//                     Apakah anda memiliki Form Pengajuan Tempo?
//                   </label>
//                 </div>
//                 <div className='w-3/5 flex flex-col justify-start'>
//                   <div className='flex gap-x-4'>
//                     <RadioGroup
//                       onChange={handleCheckboxPortalChange}
//                       value={watch('isPengajuanTempo')}
//                     >
//                       <Stack direction='row'>
//                         <Radio colorScheme='red' value='ada'>
//                           Ya, ada
//                         </Radio>
//                         <Radio colorScheme='red' value='tidak'>
//                           Tidak ada
//                         </Radio>
//                       </Stack>
//                     </RadioGroup>
//                   </div>

//                   <div className='text-caption-2 text-danger-500 mt-1'>
//                     {errors.isPengajuanTempo?.message}
//                   </div>
//                 </div>
//               </div>

//               <div className='flex flex-row  justify-between items-center'>
//                 <div className='w-2/5'>
//                   <label className='form-label text-nowrap'>Durasi Tempo</label>
//                   {!isKonfirmasi && (
//                     <span className='text-xs opacity-60'>
//                       Pilih durasi tempo yang anda inginkan
//                     </span>
//                   )}
//                 </div>
//                 <div className='w-3/5 flex flex-col '>
//                   <div className='flex flex-row items-center gap-3'>
//                     <div className={`${!isKonfirmasi && 'w-[25%]'}`}>
//                       <Controller
//                         name='tempoDuration'
//                         control={control}
//                         render={(props) => (
//                           <HookFormSelect
//                             {...props}
//                             options={dataTempo}
//                             placeholder={'Pilih Durasi Tempo'}
//                           />
//                         )}
//                       />

//                       <div className='text-caption-2 text-danger-500 mt-1'>
//                         {errors.tempoDuration?.message}
//                       </div>
//                     </div>
//                   </div>
//                 </div>
//               </div>

//               <div className='w-full flex flex-row'>
//                 <div className='w-2/5'>
//                   <label className='form-label  text-nowrap'>
//                     Jumlah Kredit Limit
//                   </label>
//                   {!isKonfirmasi && (
//                     <span className='opacity-65 text-xs'>
//                       isi dengan kredit limit perusahaan anda
//                     </span>
//                   )}
//                 </div>
//                 <div className='w-3/5'>
//                   <input
//                     value={kreditLimitFormat}
//                     onChange={handleKreditLimitChange}
//                     placeholder='Masukkan jumlah kredit limit'
//                     type='text'
//                     className='form-input'
//                   />
//                   <div className='text-caption-2 text-danger-500 mt-1'>
//                     {errors.kreditLimit?.message}
//                   </div>
//                 </div>
//               </div>

//               <div className='w-full flex flex-row'>
//                 <div className='w-2/5'>
//                   <label className='form-label  text-nowrap'>
//                     Waktu Pengiriman
//                   </label>
//                   {!isKonfirmasi && (
//                     <span className='opacity-65 text-xs'>
//                       isi dengan waktu pengiriman anda
//                     </span>
//                   )}
//                 </div>
//                 <div className='w-3/5 flex flex-row gap-2'>
//                   <div className='w-1/3'>
//                     <input
//                       {...register('waktuPengiriman')}
//                       placeholder='Masukkan waktu pengiriman'
//                       type='text'
//                       className='form-input'
//                     />
//                     <div className='text-caption-2 text-danger-500 mt-1'>
//                       {errors.waktuPengiriman?.message}
//                     </div>
//                   </div>
//                   <div className='w-2/3 '>
//                     <div className='flex flex-row items-center gap-2'>
//                       <label className=' text-nowrap text-sm opacity-70 italic'>
//                         terhitung sejak
//                       </label>

//                       <Controller
//                         name='terhitungSejak'
//                         control={control}
//                         render={(props) => (
//                           <HookFormSelect
//                             {...props}
//                             options={dataTerhitungSejak}
//                             placeholder={'waktu pengiriman'}
//                           />
//                         )}
//                       />
//                     </div>
//                     <div className='text-caption-2 text-danger-500 mt-1'>
//                       {errors.terhitungSejak?.message}
//                     </div>
//                   </div>
//                 </div>
//               </div>

//               <div className=''>
//                 {/* <div>
//                   <ReCAPTCHA
//                     ref={recaptchaRef}
//                     sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
//                   />
//                 </div> */}
//               </div>
//               <div className='flex justify-end'>
//                 {/* <Button
//                   colorScheme='red'
//                   className='w-full md:w-fit'
//                   type='submit'
//                 >
//                   Daftar Merchant{' '}
//                   {<ChevronRightIcon className='w-5' color='white' />}
//                 </Button> */}
//                 {!isKonfirmasi && (
//                   <div>
//                     <span className='text-xs opacity-60'>
//                       *Pastikan data yang anda masukan sudah benar dan sesuai
//                     </span>
//                     <button
//                       type='submit'
//                       className='btn-light bg-red-500 rounded-lg text-white w-fit py-2 px-4 md:w-fit mt-2 ml-0 md:ml-auto flex justify-between hover:bg-red-400'
//                     >
//                       <span className={` `}>Langkah Selanjutnya</span>
//                       {<ChevronRightIcon className='w-5' />}
//                     </button>
//                   </div>
//                 )}
//               </div>
//             </form>
//             <PageContent path='/daftar-merchant' />
//           </div>
//         </div>
//       </DesktopView>
//       <MobileView>
//         <div className='container flex flex-col items-star py-4'>
//           {!isKonfirmasi && (
//             <h2 className='font-semibold mb-6 text-xl'>Informasi Vendor</h2>
//           )}

//           <div className='w-full mt-4'>
//             <form
//               onSubmit={handleSubmit(onSubmitHandler)}
//               className='flex flex-col gap-4'
//             >
//               <div className='w-full flex flex-col'>
//                 <div className='w-full'>
//                   <label className='form-label  text-nowrap'>
//                     Harga Tayang (HET){' '}
//                     <span className=' opacity-60'>(Opsional)</span>
//                   </label>
//                   <input
//                     {...register('hargaTayang')}
//                     placeholder='Jelaskan detail HET yang anda miliki'
//                     type='textarea'
//                     className='form-input'
//                   />
//                   <div className='text-caption-2 text-danger-500 mt-1'>
//                     {errors.hargaTayang?.message}
//                   </div>
//                 </div>
//               </div>
//               <div
//                 className={`flex flex-col gap-2  justify-between ${
//                   isKonfirmasi ? 'items-start' : 'items-start'
//                 }`}
//               >
//                 <label className='form-label '>
//                   Tipe Kategori Produk yang Digunakan
//                 </label>
//                 <div className='flex flex-col justify-between gap-2 '>
//                   <div className='flex flex-col gap-2'>
//                     {firstColumn.map((item) => (
//                       <Checkbox
//                         size='sm'
//                         colorScheme='red'
//                         key={item.id}
//                         onChange={() => handleCheckboxChange(item.id)}
//                         isChecked={isChecked(item.id)}
//                       >
//                         {item.name}
//                       </Checkbox>
//                     ))}
//                   </div>
//                   <div className='flex flex-col gap-2'>
//                     {secondColumn.map((item) => (
//                       <Checkbox
//                         size='sm'
//                         colorScheme='red'
//                         key={item.id}
//                         isChecked={isChecked(item.id)}
//                         onChange={() => handleCheckboxChange(item.id)}
//                       >
//                         {item.name}
//                       </Checkbox>
//                     ))}
//                   </div>
//                 </div>

//                 <div className='text-caption-2 text-danger-500 mt-1'>
//                   {errors.categoryProduk?.message}
//                 </div>
//               </div>
//               <div className='w-full flex flex-col'>
//                 <div className='w-full'>
//                   <label className='form-label text-nowrap'>Merk Dagang</label>
//                   <input
//                     {...register('merkDagang')}
//                     placeholder='Merk 1, Merk 2, Merk 3'
//                     type='text'
//                     className='form-input'
//                   />
//                   <div className='text-caption-2 text-danger-500 mt-1'>
//                     {errors.merkDagang?.message}
//                   </div>
//                 </div>
//               </div>
//               <div className='w-full flex flex-col'>
//                 <label className='form-label  text-nowrap'>
//                   Apakah anda memiliki Form Pengajuan Tempo?
//                 </label>
//                 <div className='flex gap-x-4'>
//                   <RadioGroup
//                     onChange={handleCheckboxPortalChange}
//                     value={watch('isPengajuanTempo')}
//                   >
//                     <Stack direction='row'>
//                       <Radio colorScheme='red' value='ada'>
//                         Ya, ada
//                       </Radio>
//                       <Radio colorScheme='red' value='tidak'>
//                         Tidak ada
//                       </Radio>
//                     </Stack>
//                   </RadioGroup>
//                 </div>
//                 <div className='text-caption-2 text-danger-500 mt-1'>
//                   {errors.isPengajuanTempo?.message}
//                 </div>
//               </div>

//               <div className='w-full flex flex-col'>
//                 <label className='form-label  text-nowrap'>Durasi Tempo</label>
//                 <Controller
//                   name='tempoDuration'
//                   control={control}
//                   render={(props) => (
//                     <HookFormSelect
//                       {...props}
//                       options={dataTempo}
//                       placeholder={'Pilih Durasi Tempo'}
//                     />
//                   )}
//                 />

//                 <div className='text-caption-2 text-danger-500 mt-1'>
//                   {errors.tempoDuration?.message}
//                 </div>
//                 {!isKonfirmasi && (
//                   <span className='text-xs opacity-60'>
//                     Pilih durasi tempo yang anda inginkan
//                   </span>
//                 )}
//               </div>
//               <div className='w-full flex flex-col'>
//                 <label className='form-label  text-nowrap'>
//                   Jumlah Kredit Limit
//                 </label>
//                 <input
//                   value={kreditLimitFormat}
//                   onChange={handleKreditLimitChange}
//                   placeholder='Masukkan jumlah kredit limit'
//                   type='text'
//                   className='form-input'
//                 />
//                 <div className='text-caption-2 text-danger-500 mt-1'>
//                   {errors.kreditLimit?.message}
//                 </div>
//                 {!isKonfirmasi && (
//                   <span className='opacity-65 text-xs'>
//                     isi dengan kredit limit perusahaan anda
//                   </span>
//                 )}
//               </div>
//               <div className='w-full flex flex-col'>
//                 <label className='form-label  text-nowrap'>
//                   {' '}
//                   Waktu Pengiriman
//                 </label>
//                 <div className='w-full flex flex-row gap-2'>
//                   <div className='w-1/3'>
//                     <input
//                       {...register('waktuPengiriman')}
//                       placeholder='Masukkan waktu pengiriman'
//                       type='text'
//                       className='form-input'
//                     />
//                     <div className='text-caption-2 text-danger-500 mt-1'>
//                       {errors.waktuPengiriman?.message}
//                     </div>
//                   </div>
//                   <div className='w-2/3 '>
//                     <div className='flex flex-row items-center gap-2'>
//                       <label className=' text-nowrap text-sm opacity-70 italic'>
//                         terhitung sejak
//                       </label>

//                       <Controller
//                         name='terhitungSejak'
//                         control={control}
//                         render={(props) => (
//                           <HookFormSelect
//                             {...props}
//                             options={dataTerhitungSejak}
//                             placeholder={'waktu pengiriman'}
//                           />
//                         )}
//                       />
//                     </div>
//                     <div className='text-caption-2 text-danger-500 mt-1'>
//                       {errors.terhitungSejak?.message}
//                     </div>
//                   </div>
//                 </div>
//                 {!isKonfirmasi && (
//                   <span className='opacity-65 text-xs'>
//                     isi dengan waktu pengiriman anda
//                   </span>
//                 )}
//               </div>

//               <div className=''>
//                 {/* <div>
//                   <ReCAPTCHA
//                     ref={recaptchaRef}
//                     sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
//                   />
//                 </div> */}
//               </div>
//               <div className='flex justify-center w-full '>
//                 {/* <Button
//                                 colorScheme='red'
//                                 className='w-full md:w-fit'
//                                 type='submit'
//                               >
//                                 Daftar Merchant{' '}
//                                 {<ChevronRightIcon className='w-5' color='white' />}
//                               </Button> */}
//                 {!isKonfirmasi && (
//                   <div className='w-full'>
//                     <span className='text-xs opacity-60'>
//                       *Pastikan data yang anda masukan sudah benar dan sesuai
//                     </span>
//                     <button
//                       type='submit'
//                       className='btn-light bg-red-500 rounded-lg text-white w-full py-2 px-4 md:w-fit mt-2 ml-0 md:ml-auto flex justify-center hover:bg-red-400'
//                     >
//                       <span className={` `}>Langkah Selanjutnya</span>
//                       {<ChevronRightIcon className='w-5' />}
//                     </button>
//                   </div>
//                 )}
//               </div>
//             </form>
//             <PageContent path='/daftar-merchant' />
//           </div>
//         </div>
//       </MobileView>
//     </>
//   );
// });
// const validationSchema = Yup.object().shape({
//   categoryProduk: Yup.string().required('Harus di-pilih'),
//   merkDagang: Yup.string().required('Harus di-isi'),
//   isPengajuanTempo: Yup.string().required('Harus di-pilih'),
//   tempoDuration: Yup.string().required('Harus di-pilih'),
//   kreditLimit: Yup.string().required('Harus di-isi'),
//   waktuPengiriman: Yup.string().required('Harus di-isi'),
//   terhitungSejak: Yup.string().required('Harus di-pilih'),
// });
// const defaultValues = {
//   categoryProduk: '',
//   merkDagang: '',
//   isPengajuanTempo: '',
//   tempoDuration: '',
//   kreditLimit: '',
//   waktuPengiriman: '',
//   terhitungSejak: '',
// };

// export default InformasiVendor;