import React, { FC } from 'react';
import {
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
  Button,
} from '@material-ui/core';
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';

type ReservationDialogProps = {
  handleClose: () => void;
  isOpen: boolean;
};
export const ReservationDialog: FC<ReservationDialogProps> = ({
  handleClose,
  isOpen,
}: ReservationDialogProps) => {
  const { control, handleSubmit } = useForm<ReservationProps>();

  const reservation = useReservations();

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

  return (
    <div data-testid="ReservationDialog">
      <Dialog
        open={isOpen}
        onClose={handleClose}
        aria-labelledby="form-dialog-title"
      >
        <form onSubmit={handleSubmit(onSubmit)} data-testid="Form">
          <DialogTitle id="form-dialog-title">Book New Reservation</DialogTitle>
          <DialogContent>
            <DialogContentText>
              Write here below the details of your next reservation
            </DialogContentText>

            <InputField
              name="name"
              label="Name Reservation"
              type="text"
              control={control}
            />
            <InputField
              name="date"
              label="Reservation date"
              type="date"
              control={control}
            />
            <InputField
              name="time"
              label="Department Time"
              type="time"
              control={control}
            />
            <InputField
              name="destination"
              label="Destination"
              type="text"
              control={control}
            />
          </DialogContent>
          <DialogActions>
            <Button onClick={handleClose} color="primary">
              Cancel
            </Button>
            <Button type="submit" fullWidth variant="contained" color="primary">
              Insert
            </Button>
          </DialogActions>
        </form>
      </Dialog>
    </div>
  );
};