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 { Button, Checkbox, Spinner, Tooltip } from '@chakra-ui/react';
import { useState, useEffect } from 'react';
import switchAccountProgresApi from '@/lib/auth/api/switchAccountProgresApi.js';
export default function Profile() {
  const auth = useAuth();
  const [isChecked, setIsChecked] = useState(false);
  const [ubahAkun, setUbahAkun] = useState(false);
  const [isAprove, setIsAprove] = useState('unknown');
  const handleChange = async () => {
    setIsChecked(!isChecked);
  };
  useEffect(() => {
    const loadPromo = async () => {
      const progresSwitchAccount = await switchAccountProgresApi();
      if (progresSwitchAccount) {
        setIsAprove(progresSwitchAccount.status);
        setUbahAkun(progresSwitchAccount.status === 'unknown');
      }
    };
    loadPromo();
  }, []);
  return (
    <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 />
              <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 />
                  <Divider />
                </div>
              )}
              {!auth?.parentId
                ? auth?.parentId
                : auth?.parent_id &&
                  isAprove != 'unknown' && (
                    <StatusSwitchAccount status={isAprove} />
                  )}
              <PersonalProfile />
              <Divider />
              {auth?.parentId && <CompanyProfile />}
            </div>
          </div>
        </BasicLayout>
      </DesktopView>
    </IsAuth>
  );
}