import React, { useState, useEffect, useMemo, useRef } from 'react';
import { Controller, set, useForm } from 'react-hook-form';
import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
// import ProgressBar from '@ramonak/react-progress-bar';
import {
  Button,
  Checkbox,
  Spinner,
  Tooltip,
  UseToastOptions,
} from '@chakra-ui/react';
import odooApi from '~/libs/odooApi';
import { toast } from 'react-hot-toast';
import getFileBase64 from '@/core/utils/getFileBase64';
import { CheckCircleIcon } from '@heroicons/react/24/outline';
import InformasiPerusahaan from './InformasiPerusahaan';
import InformasiVendor from './InformasiVendor';
import SyaratDagang from './SyaratDagang';
import Dokumen from './Dokumen';
import createMerchantApi from '../api/createMerchantApi';
import useDevice from '@/core/hooks/useDevice';
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
import { useRouter } from 'next/router';
const Konfirmasi = ({ chekValid, buttonSubmitClick }) => {
  const { control, watch, setValue, getValues, reset } = useForm();
  const { isDesktop, isMobile } = useDevice();
  const [isOpenInformasi, setIsOpenInformasi] = useState(true);
  const [isOpenKontak, setIsOpenKontak] = useState(false);
  const [isOpenPengiriman, setIsOpenPengiriman] = useState(false);
  const [isOpenKonfirmasi, setIsOpenKonfirmasi] = useState(false);
  const formRef = useRef(null);
  const router = useRouter();
  const handleDaftarMerchant = () => {
    if (formRef.current) {
      formRef.current(); // Memicu submit form di InformasiPerusahaan
    }
  };
  const handleIsError = async (value) => {
    if (!value) {
      // goToNextStep();
      const toastId = toast.loading('Mengirimkan formulir merchant...');
      const data = {
        merchant_request: true,
      };
      const create_leads = await createMerchantApi({ data });
      if (create_leads) {
        toast.dismiss(toastId);
        toast.success('Berhasil medaftarkan merchant');
        reset();
        // router.push('/+');
      } else {
        toast.dismiss(toastId);
        toast.error('Gagal menambahkan data');
      }
    }
    reset();
    router.push('/');
  };

  return (
    <>
      {isDesktop && (
        <>
          <form className='flex mt-4 flex-col w-full '>
            <div className='w-full grid grid-cols-[1fr_auto_1fr] gap-5'>
              <div className='w-full flex flex-col gap-5 '>
                <div className=''>
                  <InformasiPerusahaan
                    isKonfirmasi={true}
                    ref={formRef}
                    handleIsError={handleIsError}
                  />
                </div>
                <div className='h-px bg-gray-300'></div>
                <div className=''>
                  <SyaratDagang
                    isKonfirmasi={true}
                    ref={formRef}
                    handleIsError={handleIsError}
                  />
                </div>
              </div>

              <div className='w-px bg-gray-300'></div>
              <div className='w-full grid grid-rows-[1fc_auto_1fc] gap-5'>
                <div className=''>
                  <InformasiVendor
                    isKonfirmasi={true}
                    ref={formRef}
                    handleIsError={handleIsError}
                  />
                </div>
              </div>
            </div>
          </form>

          <div className='flex flex-col items-end justify-end gap-2'>
            <span className='text-xs opacity-60'>
              *Pastikan data yang anda masukan sudah benar dan sesuai
            </span>
            <Button
              colorScheme='red'
              w='36'
              onClick={handleDaftarMerchant} // Memicu form submit
            >
              Daftar Merchant
            </Button>
          </div>
        </>
      )}
      {isMobile && (
        <form className='flex mt-8 py-4 flex-col w-full gap-4'>
          <div className='flex flex-col gap-4'>
            <div className='flex flex-row justify-between items-center'>
              <div className='flex flex-col justify-center items-start'>
                <p className='font-semibold text-lg'>Informasi Perusahaan</p>
                {/* <span className='text-xs opacity-70'>
                  Pastikan informasi usaha yang anda masukkan sudah sesuai
                  dengan data perusahaan anda
                </span> */}
              </div>
              <div className='p-2 bg-gray-200'>
                {isOpenInformasi ? (
                  <ChevronUpIcon
                    className='w-4'
                    onClick={() => setIsOpenInformasi(!isOpenInformasi)}
                  />
                ) : (
                  <ChevronDownIcon
                    className='w-4'
                    onClick={() => setIsOpenInformasi(!isOpenInformasi)}
                  />
                )}
              </div>
            </div>
            {isOpenInformasi && <InformasiPerusahaan isKonfirmasi={true} />}
            <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
          </div>
          <div className='flex flex-col gap-4'>
            <div className='flex flex-row justify-between'>
              <p className='font-semibold text-lg'>Informasi Vendor</p>
              <div className='p-2 bg-gray-200'>
                {isOpenKontak ? (
                  <ChevronUpIcon
                    className='w-4'
                    onClick={() => setIsOpenKontak(!isOpenKontak)}
                  />
                ) : (
                  <ChevronDownIcon
                    className='w-4'
                    onClick={() => setIsOpenKontak(!isOpenKontak)}
                  />
                )}
              </div>
            </div>
            {isOpenKontak && <InformasiVendor isKonfirmasi={true} />}
            <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
          </div>
          <div className='flex flex-col gap-4'>
            <div className='flex flex-row justify-between'>
              <p className='font-semibold text-lg'>Syarat Perdagangan</p>
              <div className='p-2 bg-gray-200'>
                {isOpenPengiriman ? (
                  <ChevronUpIcon
                    className='w-4'
                    onClick={() => setIsOpenPengiriman(!isOpenPengiriman)}
                  />
                ) : (
                  <ChevronDownIcon
                    className='w-4'
                    onClick={() => setIsOpenPengiriman(!isOpenPengiriman)}
                  />
                )}
              </div>
            </div>
            {isOpenPengiriman && <SyaratDagang isKonfirmasi={true} />}
            <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
          </div>
          
          <div className='flex flex-col items-end justify-end gap-2'>
            <span className='text-xs opacity-60'>
              *Pastikan data yang anda masukan sudah benar dan sesuai
            </span>
            <Button
              colorScheme='red'
              w='full'
              onClick={handleDaftarMerchant} // Memicu form submit
            >
              Daftar Merchant
            </Button>
          </div>
        </form>
      )}
    </>
  );
};

export default Konfirmasi;