import { useMutation, useQuery } from "@apollo/client";
import {
  Button,
  Card,
  Col,
  Form,
  InputNumber,
  notification,
  Popover,
  Row,
  Select,
} 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 { logImEXEvent } from "../../firebase/firebase.utils";
import { UPDATE_TIME_TICKET } from "../../graphql/timetickets.queries";
import { selectTechnician } from "../../redux/tech/tech.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
import TechJobClockoutDelete from "../tech-job-clock-out-delete/tech-job-clock-out-delete.component";
import { LaborAllocationContainer } from "../time-ticket-modal/time-ticket-modal.component";
import { GET_LINE_TICKET_BY_PK } from "../../graphql/jobs-lines.queries";
import { CalculateAllocationsTotals } from "../labor-allocations-table/labor-allocations-table.utility";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  technician: selectTechnician,
});

export function TechClockOffButton({
  bodyshop,
  technician,
  jobId,
  timeTicketId,
  completedCallback,
  isShiftTicket,
  otherBtnProps,
}) {
  const [loading, setLoading] = useState(false);
  const [updateTimeticket] = useMutation(UPDATE_TIME_TICKET);
  const [form] = Form.useForm();
  const { queryLoading, data: lineTicketData } = useQuery(
    GET_LINE_TICKET_BY_PK,
    {
      variables: {
        id: jobId,
      },
      skip: !jobId,
      fetchPolicy: "network-only",
      nextFetchPolicy: "network-only",
    }
  );
  const { t } = useTranslation();
  const emps = bodyshop.employees.filter(
    (e) => e.id === (technician && technician.id)
  )[0];

  const handleFinish = async (values) => {
    logImEXEvent("tech_clock_out_job");

    setLoading(true);
    const result = await updateTimeticket({
      variables: {
        timeticketId: timeTicketId,
        timeticket: {
          clockoff: (await axios.post("/utils/time")).data,
          ...values,
          rate:
            emps &&
            emps.rates.filter((r) => r.cost_center === values.cost_center)[0]
              ?.rate,
          flat_rate: emps && emps.flat_rate,
          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.clockingout", {
          message: JSON.stringify(result.errors),
        }),
      });
    } else {
      notification["success"]({
        message: t("timetickets.successes.clockedout"),
      });
    }
    setLoading(false);
    if (completedCallback) completedCallback();
  };

  const overlay = (
    <Card>
      <div>
        <Form
          form={form}
          layout="vertical"
          onFinish={handleFinish}
          initialValues={{
            cost_center: isShiftTicket
              ? "timetickets.labels.shift"
              : technician
              ? technician.cost_center
              : null,
          }}
        >
          <Row gutter={[16, 16]}>
            <Col span={!isShiftTicket ? 8 : 24}>
              {!isShiftTicket ? (
                <div>
                  <Form.Item
                    label={t("timetickets.fields.actualhrs")}
                    name="actualhrs"
                    rules={[
                      {
                        required: true,
                        //message: t("general.validation.required"),
                      },
                    ]}
                  >
                    <InputNumber min={0} precision={1} />
                  </Form.Item>
                  <Form.Item
                    label={t("timetickets.fields.productivehrs")}
                    name="productivehrs"
                    rules={[
                      {
                        required: true,
                        //message: t("general.validation.required"),
                      },
                      ({ getFieldValue }) => ({
                        validator(rule, value) {
                          console.log(
                            bodyshop.tt_enforce_hours_for_tech_console
                          );
                          if (!bodyshop.tt_enforce_hours_for_tech_console) {
                            return Promise.resolve();
                          }
                          if (
                            !value ||
                            getFieldValue("cost_center") === null ||
                            !lineTicketData
                          )
                            return Promise.resolve();

                          //Check the cost center,
                          const totals = CalculateAllocationsTotals(
                            bodyshop,
                            lineTicketData.joblines,
                            lineTicketData.timetickets,
                            lineTicketData.jobs_by_pk.lbr_adjustments
                          );

                          const fieldTypeToCheck =
                            bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber
                              ? "mod_lbr_ty"
                              : "cost_center";

                          const costCenterDiff =
                            Math.round(
                              totals.find(
                                (total) =>
                                  total[fieldTypeToCheck] ===
                                  getFieldValue("cost_center")
                              )?.difference * 10
                            ) / 10;

                          if (value > costCenterDiff)
                            return Promise.reject(
                              t(
                                "timetickets.validation.hoursenteredmorethanavailable"
                              )
                            );
                          else {
                            return Promise.resolve();
                          }
                        },
                      }),
                    ]}
                  >
                    <InputNumber min={0} precision={1} />
                  </Form.Item>
                </div>
              ) : null}

              <Form.Item
                name="cost_center"
                label={t("timetickets.fields.cost_center")}
                rules={[
                  {
                    required: true,
                    //message: t("general.validation.required"),
                  },
                ]}
              >
                <Select disabled={isShiftTicket}>
                  {isShiftTicket ? (
                    <Select.Option value="timetickets.labels.shift">
                      {t("timetickets.labels.shift")}
                    </Select.Option>
                  ) : (
                    emps &&
                    emps.rates.map((item) => (
                      <Select.Option key={item.cost_center}>
                        {item.cost_center === "timetickets.labels.shift"
                          ? t(item.cost_center)
                          : bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber
                          ? t(
                              `joblines.fields.lbr_types.${item.cost_center.toUpperCase()}`
                            )
                          : item.cost_center}
                      </Select.Option>
                    ))
                  )}
                </Select>
              </Form.Item>

              <Button type="primary" htmlType="submit" loading={loading}>
                {t("general.actions.save")}
              </Button>
              <TechJobClockoutDelete
                completedCallback={completedCallback}
                timeTicketId={timeTicketId}
              />
            </Col>
            {!isShiftTicket && (
              <Col span={16}>
                <LaborAllocationContainer
                  jobid={jobId || null}
                  loading={queryLoading}
                  lineTicketData={lineTicketData}
                />
              </Col>
            )}
          </Row>
        </Form>
      </div>
    </Card>
  );

  return (
    <Popover content={overlay} trigger="click">
      <Button loading={loading} {...otherBtnProps}>
        {t("timetickets.actions.clockout")}
      </Button>
    </Popover>
  );
}
export default connect(mapStateToProps, null)(TechClockOffButton);