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

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

  if (isAuthenticated) return <Redirect to={getNextRedirectURL(next)} />;

  return (
    <MainLayout loginRequired={false} title={LOGIN_PAGE_TITLE}>
      <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 const LOGIN_PAGE_TITLE = 'ورود';

export default LoginPage;
