import Seo from '@/core/components/Seo';
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 IsAuth from '@/lib/auth/components/IsAuth';
import InvoicesComponent from '@/lib/tempo/components/Tempo';
import { getAuth } from '~/libs/auth';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
export default function MyTempo() {
  const auth = getAuth();
  const router = useRouter();
  const [isLoading, setIsLoading] = useState(true);
  useEffect(() => {
    setIsLoading(true);
    if (!auth) {
      const nextUrl = encodeURIComponent(router.asPath);
      router.push(`/login?next=${nextUrl}`);
    } else {
      if (
        !auth.partnerTempo &&
        (!auth.partnerTempo || auth.tempoProgres === 'review')
      ) {
        setIsLoading(true);
        router.push('/pengajuan-tempo');
      }
      setIsLoading(false);
    }
  }, [auth]);

  if (isLoading && !auth) {
    return null;
  } else {
    return (
      <IsAuth>
        <Seo title='Tempo - Indoteknik.com' />

        <MobileView>
          <AppLayout title='Pembayaran Tempo'>
            <InvoicesComponent />
          </AppLayout>
        </MobileView>

        <DesktopView>
          <BasicLayout>
            <InvoicesComponent />
          </BasicLayout>
        </DesktopView>
      </IsAuth>
    );
  }
}