import React, { FC } from 'react';
import {
  Grid,
  Typography,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
  Button,
} from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
import Fab from '@material-ui/core/Fab';
import { NavBar } from 'components/Dashboard/HomePage/NavBar';
import { Reservation } from 'components/Dashboard/ReservationPage/Reservation/Reservation';
import { useReservations } from 'hooks/useReservations';
import { ReservationProps } from 'components/Dashboard/ReservationPage/Reservation/ReservationProps';
import { SubmitHandler, useForm } from 'react-hook-form';
import { InputField } from 'components/Auth/InputField/InputField';
import { useStyles } from './ReservationPage.style';
import { ReservationDialog } from './ReservationDialog';

export const ReservationPage: FC = () => {
  const classes = useStyles();
  const { control, handleSubmit } = useForm<ReservationProps>();

  const [isOpen, setIsOpen] = React.useState<boolean>(false);

  const reservation = useReservations();

  const handleOpen = (): void => {
    setIsOpen(true);
  };

  const handleClose = (): void => {
    setIsOpen(false);
  };

  const onSubmit: SubmitHandler<ReservationProps> = (
    data: ReservationProps,
  ) => {
    console.log(data);
  };

  return (
    <div data-testid="Reservation">
      <Grid container direction="column" className={classes.paddingBottom}>
        <div className={classes.root}>
          <Grid item>
            <NavBar />
          </Grid>
          <ReservationDialog handleClose={handleClose} isOpen={isOpen} />

          <Grid item container className={classes.paddingBottom}>
            <Grid item xs={1} md={2} lg={2} />

            <Grid item xs={10} md={6} lg={4}>
              <Typography variant="h2" className={classes.whiteText}>
                Plan Here Your
              </Typography>
              <Typography variant="h1" className={classes.whiteText}>
                RESERVATIONS
              </Typography>
            </Grid>

            <Grid item xs={1} />
          </Grid>
        </div>

        <Fab
          color="primary"
          size="large"
          aria-label="add"
          className={classes.fab}
          onClick={handleOpen}
        >
          <AddIcon className={classes.extendedIcon} />
        </Fab>

        <Grid item container className={classes.paddingTop}>
          <Grid item xs={2} />
          <Grid item xs={8}>
            <Typography variant="h3">Your Next Reservations</Typography>
          </Grid>
          <Grid item xs={2} />
        </Grid>

        <Reservation departure="" destination="" time="" date="" />

        <Grid item container className={classes.paddingTop}>
          <Grid item xs={2} />
          <Grid item xs={8}>
            <Typography variant="h3" align="right">
              Your Past Reservations
            </Typography>
          </Grid>
          <Grid item xs={2} />
        </Grid>

        <Reservation departure="" destination="" time="" date="" />
      </Grid>
    </div>
  );
};