import Divider from '@/core/components/elements/Divider/Divider';
import AppLayout from '@/core/components/layouts/AppLayout';
import BasicLayout from '@/core/components/layouts/BasicLayout';
import DesktopView from '@/core/components/views/DesktopView';
import MobileView from '@/core/components/views/MobileView';
import useAuth from '@/core/hooks/useAuth';
import CompanyProfile from '@/lib/auth/components/CompanyProfile';
import SwitchAccount from '@/lib/auth/components/SwitchAccount';
import IsAuth from '@/lib/auth/components/IsAuth';
import Menu from '@/lib/auth/components/Menu';
import PersonalProfile from '@/lib/auth/components/PersonalProfile';
// import StatusSwitchAccount from '@/lib/auth/components/StatusSwitchAccount';
import { Checkbox } from '@chakra-ui/react';
import { useState, useEffect } from 'react';
import switchAccountProgresApi from '@/lib/auth/api/switchAccountProgresApi.js';
import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
export default function Profile() {
  const auth = useAuth();
  const [isChecked, setIsChecked] = useState(false);
  const [ubahAkun, setUbahAkun] = useState(false);
  const [isAprove, setIsAprove] = useState();
  const [changeConfirmation, setChangeConfirmation] = useState(false);
  const handleChange = async () => {
    if (isChecked) {
      setIsChecked(!isChecked);
    } else {
      setChangeConfirmation(true);
    }
  };
  useEffect(() => {
    const loadPromo = async () => {
      const progresSwitchAccount = await switchAccountProgresApi();
      if (progresSwitchAccount) {
        setIsAprove(progresSwitchAccount.status);
        setUbahAkun(progresSwitchAccount.status);
      }
    };
    loadPromo();
  }, []);
  const handleConfirmSubmit = () => {
    setChangeConfirmation(false);
    setIsChecked(true);
  };
  return (
    <>
      <BottomPopup
        active={changeConfirmation}
        close={() => setChangeConfirmation(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={handleConfirmSubmit}
          >
            Yakin
          </button>
          <button
            className='btn-light flex-1 md:flex-none'
            type='button'
            onClick={() => setChangeConfirmation(false)}
          >
            Batal
          </button>
        </div>
      </BottomPopup>
      <IsAuth>
        <MobileView>
          <AppLayout title='Akun Saya'>
            {!auth?.parentId && !ubahAkun && (
              <div className='text-sm p-4 flex items-center'>
                <Checkbox
                  borderColor='gray.600'
                  colorScheme='red'
                  size='lg'
                  isChecked={isChecked}
                  onChange={handleChange}
                />
                <p className='ml-2'>Ubah ke akun bisnis</p>
              </div>
            )}
            {isChecked && (
              <div>
                <SwitchAccount company_type='nonpkp' />
                <Divider />
              </div>
            )}
            {/* {!auth?.parentId
              ? auth?.parentId
              : auth?.parent_id &&
                isAprove != 'unknown' && (
                  <StatusSwitchAccount status={isAprove} />
                )} */}
            <PersonalProfile />
            <Divider />
            {auth?.parentId && <CompanyProfile />}
          </AppLayout>
        </MobileView>

        <DesktopView>
          <BasicLayout>
            <div className='container mx-auto flex py-10'>
              <div className='w-3/12 pr-4'>
                <Menu />
              </div>
              <div className='w-9/12 bg-white border border-gray_r-6 rounded'>
                {!auth?.parentId && !ubahAkun && (
                  <div className='text-sm p-4 flex items-center'>
                    <Checkbox
                      borderColor='gray.600'
                      colorScheme='red'
                      size='lg'
                      isChecked={isChecked}
                      onChange={handleChange}
                    />
                    <p className='ml-2'>Ubah ke akun bisnis</p>
                  </div>
                )}
                {isChecked && (
                  <div>
                    <SwitchAccount company_type='nonpkp' />
                    <Divider />
                  </div>
                )}
                {/* {!auth?.parentId
                  ? auth?.parentId
                  : auth?.parent_id &&
                    isAprove != 'unknown' && (
                      <StatusSwitchAccount status={isAprove} />
                    )} */}
                <PersonalProfile />
                <Divider />
                {auth?.parentId && <CompanyProfile />}
              </div>
            </div>
          </BasicLayout>
        </DesktopView>
      </IsAuth>
    </>
  );
}