import Box from '@mui/material/Box';
import Button from '@mui/material/Button';

import Typography from '@mui/material/Typography';

import { Card } from '../../components/ux/Card';
import { LoginContainer } from '../../components/ux/LoginContainer';

import useLogin from './useLogin';
import InputText from '../../components/ux/InputText';

export default function Login() {
  // const navigate = useNavigate();
  const { handleSubmit, onSubmit, register, errors } = useLogin();

  // useEffect(() => {
  //   if (isAdmin) {
  //     navigate(PrivateRoutes.DASHBOARD, {
  //       replace: true,
  //     });
  //   }
  // });

  return (
    <LoginContainer direction='column' justifyContent='space-between'>
      <Card variant='outlined'>
        <Typography
          component='h1'
          variant='h4'
          sx={{ width: '100%', fontSize: 'clamp(2rem, 10vw, 2.15rem)' }}
        >
          Login
        </Typography>
        <Box
          component='form'
          onSubmit={handleSubmit(onSubmit)}
          noValidate
          sx={{
            display: 'flex',
            flexDirection: 'column',
            width: '100%',
            gap: 2,
          }}
        >
          <InputText
            register={register}
            errors={errors}
            type='email'
            field='email'
            label='Email'
            helpText='Email is required'
            placeHolder='Enter your email'
          />

          <InputText
            register={register}
            errors={errors}
            type='password'
            field='password'
            label='Password'
            helpText='Password is required'
            placeHolder='••••••'
          />

          <br />
          <Button type='submit' fullWidth variant='contained'>
            Sign in
          </Button>
        </Box>
      </Card>
    </LoginContainer>
  );
}
