import { SyncOutlined } from "@ant-design/icons";
import { Button, Card, Checkbox, Col, PageHeader, Row, Space } from "antd";
import { t } from "i18next";
import React, { useMemo } from "react";
import useLocalStorage from "../../utils/useLocalStorage";
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";

export default function ScheduleCalendarComponent({ data, refetch }) {
  const [filter, setFilter] = useLocalStorage("filter_events", {
    intake: true,
    manual: true,
    employeevacation: true,
  });
  const filteredData = useMemo(() => {
    return data.filter(
      (d) =>
        d.block ||
        (filter.intake && d.isintake) ||
        (filter.manual && !d.isintake && d.block === false) ||
        (d.__typename === "employee_vacation" &&
          filter.employeevacation &&
          !!d.employee)
    );
  }, [data, filter]);

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

      <Col span={24}>
        <PageHeader
          extra={
            <Space wrap>
              <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>
  );
}
