import { SyncOutlined } from "@ant-design/icons";
import {
  Button,
  Card,
  Checkbox,
  Col,
  PageHeader,
  Row,
  Select,
  Space,
} from "antd";
import { t } from "i18next";
import React, { useMemo } from "react";
import useLocalStorage from "../../utils/useLocalStorage";
import ScheduleAtsSummary from "../schedule-ats-summary/schedule-ats-summary.component";
import ScheduleCalendarWrapperComponent from "../schedule-calendar-wrapper/scheduler-calendar-wrapper.component";
import ScheduleModal from "../schedule-job-modal/schedule-job-modal.container";
import ScheduleManualEvent from "../schedule-manual-event/schedule-manual-event.component";
import ScheduleProductionList from "../schedule-production-list/schedule-production-list.component";
import ScheduleVerifyIntegrity from "../schedule-verify-integrity/schedule-verify-integrity.component";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import _ from "lodash";
const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ScheduleCalendarComponent);

export function ScheduleCalendarComponent({ data, refetch, bodyshop }) {
  const [filter, setFilter] = useLocalStorage("filter_events", {
    intake: true,
    manual: true,
    employeevacation: true,
    ins_co_nm: null,
  });
  const [estimatorsFilter, setEstimatiorsFilter] = useLocalStorage(
    "estimators",
    []
  );

  const estimators = useMemo(() => {
    return _.uniq([
      ...data
        .filter((d) => d.__typename === "appointments")
        .map((app) =>
          `${app.job?.est_ct_fn || ""} ${app.job?.est_ct_ln || ""}`.trim()
        )
        .filter((e) => e.length > 0),
      ...bodyshop.md_estimators.map((e) =>
        `${e.est_ct_fn || ""} ${e.est_ct_ln || ""}`.trim()
      ),
    ]);
  }, [data, bodyshop.md_estimators]);

  const filteredData = useMemo(() => {
    return data.filter((d) => {
      const estFilter =
        d.__typename === "appointments"
          ? estimatorsFilter.length === 0
            ? true
            : !!estimatorsFilter.find(
                (e) =>
                  e ===
                  `${d.job?.est_ct_fn || ""} ${d.job?.est_ct_ln || ""}`.trim()
              )
          : true;

      return (
        (d.block ||
          (filter.intake && d.isintake) ||
          (filter.manual && !d.isintake && d.block === false) ||
          (d.__typename === "employee_vacation" &&
            filter.employeevacation &&
            !!d.employee)) &&
        (filter.ins_co_nm && filter.ins_co_nm.length > 0
          ? filter.ins_co_nm.includes(d.job?.ins_co_nm)
          : true) &&
        estFilter
      );
    });
  }, [data, filter, estimatorsFilter]);

  return (
    <Row gutter={[16, 16]}>
      <ScheduleModal />

      <Col span={24}>
        <PageHeader
          extra={
            <Space wrap>
              <ScheduleAtsSummary appointments={filteredData} />
              <Select
                style={{ minWidth: "15rem" }}
                mode="multiple"
                placeholder={t("schedule.labels.estimators")}
                allowClear
                onClear={() => setEstimatiorsFilter([])}
                value={[...estimatorsFilter]}
                onChange={(e) => {
                  setEstimatiorsFilter(e);
                }}
                options={estimators.map((e) => ({
                  label: e,
                  value: e,
                }))}
              />
              <Select
                style={{ minWidth: "15rem" }}
                mode="multiple"
                placeholder={t("schedule.labels.ins_co_nm_filter")}
                allowClear
                onClear={() => setFilter({ ...filter, ins_co_nm: [] })}
                value={filter?.ins_co_nm ? filter.ins_co_nm : []}
                onChange={(e) => {
                  setFilter({ ...filter, ins_co_nm: e });
                }}
                options={bodyshop.md_ins_cos.map((i) => ({
                  label: i.name,
                  value: i.name,
                }))}
              />
              <Checkbox
                checked={filter?.intake}
                onChange={(e) => {
                  setFilter({ ...filter, intake: e.target.checked });
                }}
              >
                {t("schedule.labels.intake")}
              </Checkbox>
              <Checkbox
                checked={filter?.manual}
                onChange={(e) => {
                  setFilter({ ...filter, manual: e.target.checked });
                }}
              >
                {t("schedule.labels.manual")}
              </Checkbox>
              <Checkbox
                checked={filter?.employeevacation}
                onChange={(e) => {
                  setFilter({ ...filter, employeevacation: e.target.checked });
                }}
              >
                {t("schedule.labels.employeevacation")}
              </Checkbox>
              <ScheduleVerifyIntegrity />
              <Button
                onClick={() => {
                  refetch();
                }}
              >
                <SyncOutlined />
              </Button>
              <ScheduleProductionList />

              <ScheduleManualEvent />
            </Space>
          }
        />
      </Col>

      <Col span={24}>
        <Card>
          <ScheduleCalendarWrapperComponent
            data={filteredData}
            refetch={refetch}
            style={{ height: "100rem" }}
          />
        </Card>
      </Col>
    </Row>
  );
}