import { useMutation } from "@apollo/client";
import { Button, Card, Form, notification, Space } from "antd";
import axios from "axios";
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 { selectTechnician } from "../../redux/tech/tech.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
import TechClockInComponent from "./tech-job-clock-in-form.component";
import TechJobPrintTickets from "../tech-job-print-tickets/tech-job-print-tickets.component";
import moment from "moment";
import { setModalContext } from "../../redux/modals/modals.actions";

const mapStateToProps = createStructuredSelector({
  technician: selectTechnician,
  bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
  setTimeTicketContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "timeTicket" })),
});
export function TechClockInContainer({
  setTimeTicketContext,
  technician,
  bodyshop,
}) {
  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 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: moment(theTime).format("YYYY-MM-DD"),
            clockon: moment(theTime),
            jobid: values.jobid,
            cost_center: values.cost_center,
            ciecacode:
              bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber
                ? values.cost_center
                : Object.keys(
                    bodyshop.md_responsibility_centers.defaults.costs
                  ).find((key) => {
                    return (
                      bodyshop.md_responsibility_centers.defaults.costs[key] ===
                      values.cost_center
                    );
                  }),
          },
        ],
      },
    });

    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 } },
              });
            }}
          >
            {t("timetickets.actions.enter")}
          </Button>
          <TechJobPrintTickets />
          <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);
