import { useMutation } from "@apollo/client";
import { Button, Card, Form, notification, Space } from "antd";
import axios from "axios";
import moment from "moment";
import momenttz from "moment-timezone";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { INSERT_NEW_TIME_TICKET } from "../../graphql/timetickets.queries";
import { setModalContext } from "../../redux/modals/modals.actions";
import { selectTechnician } from "../../redux/tech/tech.selectors";
import {
  selectBodyshop,
  selectCurrentUser,
} from "../../redux/user/user.selectors";
import TechJobPrintTickets from "../tech-job-print-tickets/tech-job-print-tickets.component";
import TechClockInComponent from "./tech-job-clock-in-form.component";
import { useTreatments } from "@splitsoftware/splitio-react";

const mapStateToProps = createStructuredSelector({
  technician: selectTechnician,
  bodyshop: selectBodyshop,
  currentUser: selectCurrentUser,
});
const mapDispatchToProps = (dispatch) => ({
  setTimeTicketContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "timeTicket" })),
});
export function TechClockInContainer({
  setTimeTicketContext,
  technician,
  bodyshop,
  currentUser,
}) {
  const { Enhanced_Payroll } = useTreatments(
    ["Enhanced_Payroll"],
    {},
    bodyshop.imexshopid
  );
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [insertTimeTicket] = useMutation(INSERT_NEW_TIME_TICKET, {
    refetchQueries: ["QUERY_ACTIVE_TIME_TICKETS"],
  });
  const { t } = useTranslation();

  const emps = bodyshop.employees.filter(
    (e) => e.id === (technician && technician.id)
  )[0];

  const handleFinish = async (values) => {
    setLoading(true);
    const theTime = (await axios.post("/utils/time")).data;
    const result = await insertTimeTicket({
      variables: {
        timeTicketInput: [
          {
            bodyshopid: bodyshop.id,
            employeeid: technician.id,
            date:
              typeof bodyshop.timezone === "string"
                ? momenttz.tz(theTime, bodyshop.timezone).format("YYYY-MM-DD")
                : typeof bodyshop.timezone === "number"
                ? moment(theTime)
                    .format("YYYY-MM-DD")
                    .utcOffset(bodyshop.timezone)
                : moment(theTime).format("YYYY-MM-DD"),
            clockon: moment(theTime),
            jobid: values.jobid,
            cost_center: values.cost_center,
            ciecacode:
              bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber || Enhanced_Payroll.treatment === 'on'
                ? values.cost_center
                : Object.keys(
                    bodyshop.md_responsibility_centers.defaults.costs
                  ).find((key) => {
                    return (
                      bodyshop.md_responsibility_centers.defaults.costs[key] ===
                      values.cost_center
                    );
                  }),
            created_by: currentUser.email.concat(
              " | ",
              technician.employee_number
                .concat(" ", technician.first_name, " ", technician.last_name)
                .trim()
            ),
          },
        ],
      },
    });

    if (!!result.errors) {
      notification["error"]({
        message: t("timetickets.errors.clockingin", {
          message: JSON.stringify(result.errors),
        }),
      });
    } else {
      notification["success"]({
        message: t("timetickets.successes.clockedin"),
      });
    }
    form.resetFields();
    setLoading(false);
  };

  return (
    <Card
      title={t("timetickets.labels.clockintojob")}
      extra={
        <Space wrap>
          <Button
            onClick={() => {
              setTimeTicketContext({
                actions: {},
                context: {
                  timeticket: {
                    employeeid: technician.id,
                    flat_rate: emps.flat_rate,
                  },
                  created_by: currentUser.email.concat(
                    " | ",
                    technician.employee_number
                      .concat(
                        " ",
                        technician.first_name,
                        " ",
                        technician.last_name
                      )
                      .trim()
                  ),
                },
              });
            }}
          >
            {t("timetickets.actions.enter")}
          </Button>
          <TechJobPrintTickets attendacePrint={false} />
          <Button
            type="primary"
            onClick={() => form.submit()}
            loading={loading}
          >
            {t("timetickets.actions.clockin")}
          </Button>
        </Space>
      }
    >
      <Form form={form} layout="vertical" onFinish={handleFinish}>
        <TechClockInComponent form={form} />
      </Form>
    </Card>
  );
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TechClockInContainer);