import moment from "moment";
import queryString from "query-string";
import React from "react";
import { Calendar, momentLocalizer } from "react-big-calendar";
import { connect } from "react-redux";
import { useHistory, useLocation } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import Event from "../schedule-event/schedule-event.container";
import HeaderComponent from "./schedule-calendar-header.component";
import "./schedule-calendar.styles.scss";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
});
const localizer = momentLocalizer(moment);
export function ScheduleCalendarWrapperComponent({
  bodyshop,
  data,
  refetch,
  defaultView,
  setDateRangeCallback,
  date,
  ...otherProps
}) {
  const search = queryString.parse(useLocation().search);
  const history = useHistory();

  const handleEventPropStyles = (event, start, end, isSelected) => {
    // if (!!!bodyshop.ssbuckets) {
    //   return {};
    // }
    // const defaultEventColor = "#3174ad";
    // const jobHrs = result.jobs_by_pk.jobhrs.aggregate.sum.mod_lb_hrs;
    // const JobBucket = bodyshop.ssbuckets.filter(
    //   (bucket) =>
    //     bucket.gte <= jobHrs && (!!bucket.lt ? bucket.lt > jobHrs : true)
    // )[0];

    return {
      ...(event.color
        ? {
            style: {
              backgroundColor:
                event.color && event.color.hex ? event.color.hex : event.color,
            },
          }
        : {}),
      className: `${event.arrived ? "imex-event-arrived" : ""} ${
        event.block ? "imex-event-block" : ""
      }`,
    };
  };

  const selectedDate = new Date(date || moment(search.date) || Date.now());

  return (
    <Calendar
      events={data}
      defaultView={search.view || defaultView || "week"}
      date={selectedDate}
      onNavigate={(date, view, action) => {
        search.date = date.toISOString().substr(0, 10);
        history.push({ search: queryString.stringify(search) });
      }}
      onRangeChange={(start, end) => {
        if (setDateRangeCallback) setDateRangeCallback({ start, end });
      }}
      onView={(view) => {
        search.view = view;
        history.push({ search: queryString.stringify(search) });
      }}
      step={30}
      timeslots={1}
      showMultiDayTimes
      localizer={localizer}
      min={
        bodyshop.schedule_start_time
          ? new Date(bodyshop.schedule_start_time)
          : new Date("2020-01-01T06:00:00")
      } 
      max={
        bodyshop.schedule_end_time
          ? new Date(bodyshop.schedule_end_time)
          : new Date("2020-01-01T20:00:00")
      }
      eventPropGetter={handleEventPropStyles}
      components={{
        event: (e) => Event({ event: e.event, refetch: refetch }),
        header: HeaderComponent,
      }}
      {...otherProps}
    />
  );
}

export default connect(mapStateToProps, null)(ScheduleCalendarWrapperComponent);