import React from 'react';
import { useMemo, useState, useEffect, useRef } from 'react';
import Image from '~/components/ui/image';
import InformasiPerusahaan from './InformasiPerusahaan';
import InformasiVendor from './InformasiVendor';
import SyaratDagang from './SyaratDagang';
import Dokumen from './Dokumen';
import { getAuth } from '~/libs/auth';
import { setAuth } from '@/core/utils/auth';
import useAuth from '@/core/hooks/useAuth';
import { useRouter } from 'next/router';
import { Controller, useForm } from 'react-hook-form';
import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline';
import { Button, Checkbox, Spinner, Tooltip } from '@chakra-ui/react';
import clsxm from '~/libs/clsxm';
import { toast } from 'react-hot-toast';
import useDevice from '@/core/hooks/useDevice';
import odooApi from '~/libs/odooApi';
import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
import PageContent from '@/lib/content/components/PageContent';
const Merchant = () => {
  const { isDesktop, isMobile } = useDevice();
  const [currentStep, setCurrentStep] = React.useState(0);
  const NUMBER_OF_STEPS = 5;
  const [isLoading, setIsLoading] = useState(false);
  const [bigData, setBigData] = useState();
  const [idTempo, setIdTempo] = useState(0);
  const { control, watch, setValue } = useForm();
  const auth = useAuth();
  const router = useRouter();
  const [BannerTempo, setBannerTempo] = useState();
  const [notValid, setNotValid] = useState(false);
  const [buttonSubmitClick, setButtonSubmitClick] = useState(false);

  const [error, setError] = useState(false);

  const handleIsError = (value) => {
    console.log('value yang dihasilkan', value);
    if (!value) {
      goToNextStep();
    }
    setError(value); // Memperbarui state berdasarkan isError
  };
  const stepDivs = [
    <InformasiPerusahaan handleIsError={handleIsError} />,
    <InformasiVendor handleIsError={handleIsError} />,
    <SyaratDagang handleIsError={handleIsError} />,
    <Dokumen handleIsError={handleIsError} />,
  ];

  const stepLabels = [
    'informasi_perusahaan',
    'kontak_person',
    'Pengiriman',
    'Referensi',
    'Dokumen',
    'Konfirmasi',
  ];

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

  // useEffect(() => {
  //   const loadBigData = async () => {
  //     const toCamelCase = (str) =>
  //       str.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());

  //     const transformKeysToCamelCase = (data) => {
  //       if (Array.isArray(data)) {
  //         return data.map((item) => transformKeysToCamelCase(item));
  //       } else if (data && typeof data === 'object') {
  //         return Object.keys(data).reduce((acc, key) => {
  //           const camelKey = toCamelCase(key); // Ubah kunci menjadi camelCase
  //           acc[camelKey] = transformKeysToCamelCase(data[key]); // Rekursif untuk nested object atau array
  //           return acc;
  //         }, {});
  //       }
  //       return data; // Jika bukan object atau array, kembalikan nilai aslinya
  //     };

  //     try {
  //       const dataPaymentTerm = await odooApi(
  //         'GET',
  //         `/api/v1/partner/detail-tempo/${auth.parentId}`
  //       );
  //       const transformedData = transformKeysToCamelCase(dataPaymentTerm);
  //       setBigData(transformedData);
  //     } catch (error) {
  //       console.error('Error loading dataPaymentTerm:', error);
  //     }
  //   };

  //   loadBigData();
  // }, [auth]);

  // useEffect(() => {
  //   const cachedData = bigData;

  //   const loadBigData = async () => {
  //     if (cachedData) {
  //       // Ambil kunci-kunci yang relevan berdasarkan currentStep dari stepDivsForm
  //       const formKeys = stepDivsForm[currentStep]
  //         ? Object.keys(stepDivsForm[currentStep])
  //         : [];
  //       if (currentStep === 3) {
  //         stepDivsUpdateForm[currentStep](cachedData.supplierIds);
  //       } else if (currentStep === 4) {
  //         formKeys.forEach((key) => {
  //           if (cachedData[key]) {
  //             // Proses hanya kunci yang ada di cachedData
  //             const { name, format, base64 } = cachedData[key];
  //             stepDivsUpdateForm[currentStep](key, name, format, base64);
  //           }
  //         });
  //       } else {
  //         formKeys.forEach((key) => {
  //           if (bigData[key]) {
  //             // Ubah data menjadi string
  //             const stringData =
  //               typeof bigData[key] === 'object'
  //                 ? JSON.stringify(bigData[key]) // Untuk objek atau array
  //                 : String(bigData[key]); // Untuk tipe primitif
  //             // Kirim data yang sudah diubah ke string ke stepDivsUpdateForm
  //             stepDivsUpdateForm[currentStep](key, stringData);
  //           }
  //         });
  //       }
  //     }
  //   };
  //   loadBigData();
  //   validate();
  //   validateKontakPerson();
  //   validatePengiriman();
  //   validateDokumen();
  //   validateSupplier();
  //   updateHasSave(true);
  // }, [currentStep, bigData, auth]);

  const goToNextStep = () => {
    // if (!isFormValid) {
    //   setNotValid(true);
    //   setButtonSubmitClick(!buttonSubmitClick);
    //   return;
    // } else {
    //   // saveToLocalStorage(stepLabels[currentStep], stepDivsForm[currentStep]);
    //   if (currentStep == 3) {
    //     handleDaftarTempoSupplier();
    //   } else if (currentStep == 4) {
    //     handleDaftarTempoDokumen();
    //   } else {
    //     handleDaftarTempoPerPage(
    //       stepLabels[currentStep],
    //       stepDivsForm[currentStep]
    //     );
    //   }
    //   setButtonSubmitClick(!buttonSubmitClick);
    //   setNotValid(false);
    // }
    setCurrentStep((prev) => (prev === NUMBER_OF_STEPS - 1 ? prev : prev + 1));
  };

  const goPrevStep = () => {
    setCurrentStep((prev) => (prev === NUMBER_OF_STEPS - 1 ? prev : prev - 1));
  };

  useEffect(() => {
    const getBanner = async () => {
      const get = await odooApi('GET', '/api/v1/banner?type=banner-form-tempo');
      // setBannerTempo(get[0].image);
      setBannerTempo(
        'https://erp.indoteknik.com/api/image/x_banner.banner/x_banner_image/431'
      );
    };
    getBanner();
  }, []);
  return (
    <>
      <div className='container flex flex-col items-center '>
        {BannerTempo && (
          <Image
            src={BannerTempo}
            alt='FORM Tempo'
            width={500}
            height={160}
            className='w-full mt-6'
          />
        )}
        <h1 className=' font-semibold text-center mb-6'>Form Merchant</h1>
        <p
          className={`text-center  ${
            isMobile ? 'w-full text-sm' : 'w-3/4 mb-4'
          }`}
        >
          Pembayaran tempo adalah layanan pembayaran berjangka yang difasilitasi
          indoteknik.com untuk konsumen akun bisnis yang terdaftar dengan waktu
          pembayaran mulai dari 7, 14, 21 hingga 30 Hari.
        </p>
      </div>
      <div
        className={`h-[2px] w-full ${isMobile ? 'mt-4' : 'mb-4'}  bg-gray_r-3`}
      />

      <div className={`container ${isMobile ? 'mt-4' : ''} flex flex-col`}>
        <div>{stepDivs[currentStep]}</div>
        {isDesktop && <section className='flex gap-10 mt-10'></section>}
        {isMobile && (
          <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
        )}
        {/* <div
          className={`flex ${
            isMobile
              ? 'flex-col justify-start items-start'
              : 'flex-col justify-end items-end'
          }    mb-8 gap-2`}
        >
          <span className='text-xs opacity-60'>
            *Pastikan data yang anda masukan sudah benar dan sesuai
          </span>
          <div
            className={` flex flex-row ${
              currentStep > 0 && currentStep < 5
                ? 'justify-between'
                : 'justify-end'
            } items-center w-full ${isMobile ? 'gap-x-4 ' : ''}`}
          >
            {currentStep < 5 && currentStep > 0 && (
              <Button
                colorScheme='yellow'
                w={`${isMobile ? 'full' : 'fit'}`}
                onClick={goPrevStep}
              >
                {<ChevronLeftIcon className='w-5' />}
                <span className={`font-medium ${isMobile ? 'text-xs' : ''} `}>
                  Langkah Sebelumnya
                </span>
              </Button>
            )}
            {currentStep < 5 && (
              <>
                <Button
                  colorScheme='red'
                  w={`${isMobile ? 'full' : 'fit'}`}
                  isDisabled={currentStep === NUMBER_OF_STEPS - 1}
                  onClick={goToNextStep}
                >
                  <span className={`${isMobile ? 'text-xs' : ''} `}>
                    Langkah Selanjutnya
                  </span>
                  {<ChevronRightIcon className='w-5' />}
                </Button>
              </>
            )}
          </div>
          {currentStep == 5 && (
            <div
              className={`flex flex-col ${
                isMobile ? 'items-start' : 'items-end'
              } w-full justify-start gap-4`}
            >
              <Button
                colorScheme='red'
                w={`${isMobile ? 'full' : '36'}`}
                isDisabled={!isCheckedTNC}
                onClick={handleDaftarTempo}
              >
                Daftar Tempo {<ChevronRightIcon className='w-5' />}
              </Button>
            </div>
          )}
        </div> */}
      </div>
    </>
  );
};

export default Merchant;