import { Redirect } from 'react-router-dom';
import Col from 'react-bootstrap/Col';
import MainLayout from '../layouts/main';
import { useSelector } from 'react-redux';
import LoginForm from './form';
import useQueryParams from '../../hooks/query-params';
import { AUTHENTICATED } from '../../redux/constants';

function LoginPage() {
  const isAuthenticated = useSelector(state => state.auth.status === AUTHENTICATED);
  const { next } = useQueryParams();

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

  return (
    <MainLayout loginRequired={false}>
      <Col sm={12} md={10} lg={8} className='mx-auto'>
        <LoginForm />
      </Col>
    </MainLayout>
  );
}

export default LoginPage;