import moment from "moment";
import React from "react";
import { Calendar, momentLocalizer } from "react-big-calendar";
//import "react-big-calendar/lib/css/react-big-calendar.css";
import "./schedule-calendar.styles.scss";
import DateCellWrapper from "../schedule-datecellwrapper/schedule-datecellwrapper.component";
import Event from "../schedule-event/schedule-event.container";
const localizer = momentLocalizer(moment);

export default function ScheduleCalendarWrapperComponent({
  data,
  refetch,
  defaultView,
  ...otherProps
}) {
  return (
    <Calendar
      events={data}
      defaultView={defaultView}
      step={30}
      showMultiDayTimes
      localizer={localizer}
      min={new Date("2020-01-01T06:00:00")} //TODO Read from business settings.
      max={new Date("2020-01-01T20:00:00")}
      components={{
        event: e => {
          return Event({ event: e.event, refetch: refetch });
        },
        dateCellWrapper: DateCellWrapper
      }}
      {...otherProps}
    />
  );
}
