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 { Button, Checkbox, Spinner, Tooltip } from '@chakra-ui/react';
import { useState } from 'react';

export default function Profile() {
  const auth = useAuth();
  const [isChecked, setIsChecked] = useState(false);
  const handleChange = async () => {
    setIsChecked(!isChecked);
  };
  return (
    <IsAuth>
      <MobileView>
        <AppLayout title='Akun Saya'>
          <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 && (
                <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>
              )}
              <PersonalProfile />
              <Divider />
              {auth?.parentId && <CompanyProfile />}
            </div>
          </div>
        </BasicLayout>
      </DesktopView>
    </IsAuth>
  );
}