import {
  Input,
  TableCell,
  Typography,
  Divider,
  Table,
  TableBody,
  TableRow,
  Grid,
  CircularProgress,
  Backdrop,
  Snackbar,
} from '@mui/material';
import { makeStyles } from '@mui/styles';
import axios from 'axios';
import { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';

const useStyles = makeStyles({
  root: { margin: '2em 0', padding: '0 15%' },
  title: {
    padding: '17px 0',
    fontSize: '18px',
    color: '#222222',
    fontWeight: 'bold',
  },
  input: {
    border: '1px solid #d6d6d6',
    height: '31px',
    padding: '0 10px',
    fontSize: '12px',
    width: '380px',
  },
  registerbutton: {
    margin: '10px 0',
    height: '45px',
    width: '150px',
    backgroundColor: '#000',
    color: '#ffffff',
    fontWeight: 600,
    fontSize: '14px',
    border: '1px solid #000',
    '&:hover': {
      backgroundColor: '#333',
    },
  },
  cancelbutton: {
    margin: '10px 0',
    height: '45px',
    width: '150px',
    backgroundColor: '#fff',
    color: '#000',
    fontWeight: 600,
    fontSize: '14px',
    border: '1px solid #000',
  },
  link: {
    fontSize: 13,
    margin: '1em 0',
    display: 'flex',
    justifyContent: 'center',
    columnGap: 5,
  },
  cell: {
    padding: '10px 15px',
    fontSize: '12px',
    backgroundColor: '#fbfbfb',
    fontWeight: 'bold',
  },
  largerCell: {
    padding: '10px 22px',
    fontSize: '12px',
    backgroundColor: '#fbfbfb',
    fontWeight: 'bold',
  },
});

const Register = () => {
  const classes = useStyles();
  const navigate = useNavigate();
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);
  const handleClose = () => {
    setIsLoading(false);
  };

  const handlErrorClose = () => {
    setIsError(false);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    setIsError(false);
    setIsLoading(true);
    if (e.target.password.value !== e.target.confirmPassword.value) {
      setIsError(true);
      return;
    }
    const payload = {
      username: e.target.username.value,
      password: e.target.password.value,
      firstName: e.target.firstName.value,
      lastName: e.target.lastName.value,
      ...(e.target.email.value && { emailAddress: e.target.email.value }),
      ...(e.target.phoneNumber.value && {
        phoneNumber: e.target.phoneNumber.value,
      }),
    };
    axios
      .post(`http://localhost:4000/auth/register`, payload)
      .then((res) => {
        setIsLoading(false);
      })
      .catch((err) => console.log(err));
  };

  return (
    <div className={classes.root}>
      <Typography className={classes.title}>Create your account</Typography>
      <Divider style={{ backgroundColor: 'black' }} />
      <form onSubmit={handleSubmit}>
        <Table
          style={{
            borderCollapse: 'separate',
            boxSizing: 'border-box',
            textIndent: 'initial',
            borderColor: 'gray',
          }}
        >
          <caption>▪ Required fields</caption>
          <TableBody>
            <TableRow>
              <TableCell component="th" scope="row" className={classes.cell}>
                ▪ Username
              </TableCell>
              <TableCell>
                <Input
                  className={classes.input}
                  disableUnderline
                  required
                  name="username"
                  type="text"
                  autoComplete
                  autoFocus
                />
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell component="th" scope="row" className={classes.cell}>
                ▪ Password
              </TableCell>
              <TableCell>
                <Input
                  className={classes.input}
                  disableUnderline
                  required
                  name="password"
                  type="password"
                  pattern=".{8,}"
                  title="Eight or more characters"
                  autoComplete
                />
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell component="th" scope="row" className={classes.cell}>
                ▪ Password Confirmation
              </TableCell>
              <TableCell>
                <Input
                  className={classes.input}
                  disableUnderline
                  required
                  name="confirmPassword"
                  type="password"
                  inputProps={{
                    inputMode: 'string',
                    pattern: '.{8,}',
                    title: 'Eight or more characters',
                  }}
                />
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell component="th" scope="row" className={classes.cell}>
                ▪ First name
              </TableCell>
              <TableCell>
                <Input
                  className={classes.input}
                  disableUnderline
                  required
                  name="firstName"
                  type="text"
                  autoComplete
                />
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell component="th" scope="row" className={classes.cell}>
                ▪ Last name
              </TableCell>
              <TableCell>
                <Input
                  className={classes.input}
                  disableUnderline
                  required
                  name="lastName"
                  type="text"
                  autoComplete
                />
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell
                component="th"
                scope="row"
                className={classes.largerCell}
              >
                Email Address
              </TableCell>
              <TableCell>
                <Input
                  className={classes.input}
                  disableUnderline
                  name="email"
                  type="email"
                  size="30"
                  autoComplete
                />
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell
                component="th"
                scope="row"
                className={classes.largerCell}
              >
                Phone Number
              </TableCell>
              <TableCell>
                <Input
                  className={classes.input}
                  disableUnderline
                  name="phoneNumber"
                  inputProps={{
                    inputMode: 'numeric',
                    pattern: '[0-9]{10}',
                    title:
                      'special characters such as - or () are not allowed. only the US phone numbers are allowed. ex) 5302201234',
                  }}
                  type="tel"
                  autoComplete
                />
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
        <div className={classes.link}>
          Have an account?
          <Link to="/login" style={{ fontWeight: 'bold' }}>
            Sign in
          </Link>
        </div>
        <Grid container spacing={2} justify="center">
          <Grid item>
            <button
              className={classes.cancelbutton}
              onClick={() => navigate('/')}
            >
              Cancel
            </button>
          </Grid>
          <Grid item>
            <button className={classes.registerbutton} type="submit">
              Register
            </button>
          </Grid>
        </Grid>
      </form>
      <Backdrop
        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
        open={isLoading}
        onClick={handleClose}
      >
        <CircularProgress />
      </Backdrop>
      <Snackbar
        anchorOrigin={{ horizontal: 'center', vertical: 'top' }}
        open={isError}
        onClose={handlErrorClose}
        message="password does not match"
        key="password"
      />
    </div>
  );
};

export default Register;