import React, { FC, useState } from 'react';
import { Grid } from '@material-ui/core';
import { Reservation } from 'components/Dashboard/ReservationPage/Reservation/Reservation';
import DateFnsUtils from '@date-io/date-fns';
import itLocale from 'date-fns/locale/en-US';
import {
  KeyboardDatePicker,
  MuiPickersUtilsProvider,
} from '@material-ui/pickers';
import { useReservationsListByWeek } from 'hooks/useReservationsListByWeek';

/**
 * Displays a list of all reservations from api.
 * @returns rendered list of reservations.
 */
export const ReservationsListByWeek: FC = () => {
  const [selectedDate, handleDateChange] = useState<Date | null>(new Date());

  const reservations = useReservationsListByWeek(selectedDate);

  return (
    <MuiPickersUtilsProvider locale={itLocale} utils={DateFnsUtils}>
      <div data-testid="ReservationListViewer">
        <KeyboardDatePicker
          value={selectedDate}
          variant="static"
          onChange={(date) => handleDateChange(date)}
          format="dd/MM/yyyy"
        />
        <Grid item container>
          {reservations.length !== 0 ? (
            reservations.map((reservation, key) => (
              <Reservation reservation={reservation} />
            ))
          ) : (
            <h1>You do not have reservations.</h1>
          )}
        </Grid>
      </div>{' '}
    </MuiPickersUtilsProvider>
  );
};