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 "../job-at-change/schedule-event.container";
import HeaderComponent from "./schedule-calendar-header.component";
import "./schedule-calendar.styles.scss";
import JobDetailCards from "../job-detail-cards/job-detail-cards.component";
import { selectProblemJobs } from "../../redux/application/application.selectors";
import { Alert } from "antd";
import { useTranslation } from "react-i18next";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  problemJobs: selectProblemJobs,
});
const localizer = momentLocalizer(moment);
export function ScheduleCalendarWrapperComponent({
  bodyshop,
  problemJobs,
  data,
  refetch,
  defaultView,
  setDateRangeCallback,
  date,
  ...otherProps
}) {
  const search = queryString.parse(useLocation().search);
  const history = useHistory();
  const { t } = useTranslation();
  const handleEventPropStyles = (event, start, end, isSelected) => {
    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 (
    <>
      <JobDetailCards />
      {problemJobs &&
        problemJobs.map((problem) => (
          <Alert
            key={problem.id}
            type="error"
            message={t("appointments.labels.dataconsistency", {
              ro_number: problem.ro_number,
              code: problem.code,
            })}
          />
        ))}

      <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={15}
        // 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({ bodyshop: bodyshop, event: e.event, refetch: refetch }),
          header: (p) => (
            <HeaderComponent {...p} events={data} refetch={refetch} />
          ),
        }}
        {...otherProps}
      />
    </>
  );
}

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