import {Redirect} from 'react-router-dom';
import MainLayout from '../layouts/main';
import LoginForm from './form';
import useQueryParams from '../../hooks/query-params';
import {useUser} from '../../hooks/user';

function LoginPage() {
  const {isAuthenticated} = useUser();
  const {next} = useQueryParams();

  if (isAuthenticated) {
    const nextURL = next ? next.replace(';', '&') : '/orders';
    return (<Redirect to={nextURL}/>);
  }

  return (
    <MainLayout loginRequired={false}>
      <div className='flex justify-center'>
        <div className='w-full md:w-3/4 lg:w-2/3 xl:w-1/2 2xl:w-1/3'>
          <LoginForm/>
        </div>
      </div>
    </MainLayout>
  );
}

export default LoginPage;
