import { useForm } from 'react-hook-form'
import React from 'react';
import { TextField, Button, MenuItem, Grid, Box, Stack, Typography, Link, FormHelperText, Paper } from '@mui/material';
import { useCustomTheme } from '@/themes/useCustomTheme';

export interface SignUpFormProps {
  onSubmit: any;
}

export default function SignUpForm(props: SignUpFormProps) {
  const theme = useCustomTheme();
  const [passwordMatch, setPasswordMatch] = React.useState(true)
  const { register, handleSubmit, watch, formState: {errors} } = useForm();
  let password;
  password = watch("password", "")

  return (
    <Box 
    sx={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      minHeight: '80vh',
      px: theme.customProperties.sectionPaddingX
    }}
  >
    <Paper
      sx={{
        p: { xs: 2, md: 3, lg: 4 },
        width: '100%',
        maxWidth: '600px',
      }}
    >
      <Typography variant='h5'>
        SIGN UP
      </Typography>
      <Box component='form' autoComplete='off' onSubmit={handleSubmit(props.onSubmit)}>
        <Stack spacing={2} alignItems='center'>
        <Grid container spacing={2} alignItems='center'>
            <Grid item xs={6}>
              <TextField
                label="First Name"
                type="text"
                {...register("firstName", {required: true, maxLength: 80})}
                sx={{ width: '100%' }}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label="Last Name"
                type="text"
                {...register("lastName", {required: true, maxLength: 100})}
                sx={{ width: '100%' }}
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                type="text"
                label="Email"
                {...register("email", {required: true, pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/i})} 
                sx={{ width: '100%' }}
              />
            </Grid>
            <Grid item xs={6} md={3}>
              <TextField
                label="Age"
                type="number"
                {...register("age", {required: true, max: 100, min: 16, maxLength: 3})}
                sx={{ width: '100%' }}
              />
            </Grid>
            <Grid item xs={6} md={3}>
              <TextField
                label="Height (cm)"
                type="number"
                {...register("height", {required: true})} 
                sx={{ width: '100%' }}
              />
            </Grid>
            <Grid item xs={6} md={3}>
              <TextField
                label="Weight (kg)"
                type="number"
                {...register("weight", {required: true})} 
                sx={{ width: '100%' }}
              />
            </Grid>
            <Grid item xs={6} md={3}>
              <TextField
                label="Gender"
                select
                {...register("gender", { required: true })}
                sx={{ width: '100%' }}
              >
                <MenuItem value='male'>Male</MenuItem>
                <MenuItem value='female'>Female</MenuItem>
              </TextField>
            </Grid>
            <Grid item xs={12} md={6}>
              <TextField
                type="password"
                label="Password"
                {...register("password", {required: true})} 
                sx={{ width: '100%' }}
                error={!passwordMatch}
              />
            </Grid>
            <Grid item xs={12} md={6}>
              <TextField
                type="password"
                label="Confirm Password" 
                error={!passwordMatch}
                {...register("confirmPassword", {
                  required: true,
                  validate: (value: string) => {
                    if (watch('password') != value) {
                      setPasswordMatch(false)
                      return 'Your passwords do not match'
                    }
                  }
                })}

                sx={{ width: '100%' }}
              />
            </Grid>
            <Grid item xs={12}>
              {errors.confirmPassword && errors.confirmPassword.message && (
                <FormHelperText error>
                  {errors.confirmPassword.message as string || ''}
                </FormHelperText>
              )}
            </Grid>
          </Grid>
          <Stack>
            <Button variant='contained' type='submit'>Create Account</Button>
          </Stack>
          <Typography>Already have an account? <Link href='/login'>Log in here</Link></Typography>
        </Stack>
      </Box>
    </Paper>
  </Box>
  )
}