import { useHandleSignInCallback } from '@logto/react';
import { Spin } from 'antd';
import { useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router';

export const CallbackPage = () => {
  const { isLoading, isAuthenticated, error } = useHandleSignInCallback(() => {
    // Navigate to root path when finished
  });

  const navigate = useNavigate();
  const location = useLocation();
  useEffect(() => {
    if (isAuthenticated) {
      console.debug({ isLoading, isAuthenticated, error });
      const redirect = sessionStorage.getItem('redirect');
      if (redirect) {
        navigate(redirect);
        sessionStorage.removeItem('redirect');
      } else {
        navigate('/user-center');
      }
    }
  }, [isAuthenticated]);
  // When it's working in progress
  if (isLoading) {
    return (
      <Spin spinning>
        <div style={{ height: '100vh', width: '100vw' }} />
      </Spin>
    );
  }
  return null;
};