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, Collapse } from "antd";
import { useTranslation, Trans } from "react-i18next";
import { Link } from "react-router-dom";

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 && !((search.view || defaultView) === "agenda")
        ? {
            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.length > 2 ? (
        <Collapse>
          <Collapse.Panel
            header={
              <span style={{ color: "tomato" }}>
                {t("appointments.labels.severalerrorsfound")}
              </span>
            }
          >
            {problemJobs.map((problem) => (
              <Alert
                key={problem.id}
                type="error"
                message={
                  <Trans
                    i18nKey="appointments.labels.dataconsistency"
                    components={[
                      <Link
                        to={`/manage/jobs/${problem.id}`}
                        target="_blank"
                      />,
                    ]}
                    values={{
                      ro_number: problem.ro_number,
                      code: problem.code,
                    }}
                  />
                }
              />
            ))}
          </Collapse.Panel>
        </Collapse>
      ) : (
        problemJobs.map((problem) => (
          <Alert
            key={problem.id}
            type="error"
            message={
              <Trans
                i18nKey="appointments.labels.dataconsistency"
                components={[
                  <Link to={`/manage/jobs/${problem.id}`} target="_blank" />,
                ]}
                values={{
                  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);