import { useLazyQuery } from "@apollo/client";
import { Form, Input, InputNumber, Select, Switch } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { GET_LINE_TICKET_BY_PK } from "../../graphql/jobs-lines.queries";
import {
  selectAuthLevel,
  selectBodyshop,
} from "../../redux/user/user.selectors";
import EmployeeSearchSelect from "../employee-search-select/employee-search-select.component";
import FormDatePicker from "../form-date-picker/form-date-picker.component";
import FormDateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
import JobSearchSelect from "../job-search-select/job-search-select.component";
import LaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.component";
import { CalculateAllocationsTotals } from "../labor-allocations-table/labor-allocations-table.utility";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
import { HasRbacAccess } from "../rbac-wrapper/rbac-wrapper.component";
import TimeTicketList from "../time-ticket-list/time-ticket-list.component";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  authLevel: selectAuthLevel,
});
const mapDispatchToProps = (dispatch) => ({});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TimeTicketModalComponent);

export function TimeTicketModalComponent({
  form,
  bodyshop,
  authLevel,
  employeeAutoCompleteOptions,
  isEdit,
  employeeSelectDisabled,
}) {
  const { t } = useTranslation();
  const [loadLineTicketData, { called, loading, data: lineTicketData }] =
    useLazyQuery(GET_LINE_TICKET_BY_PK, {
      fetchPolicy: "network-only",
      nextFetchPolicy: "network-only",
    });
  const CostCenterSelect = ({ emps, value, ...props }) => {
    return (
      <Select
        value={value === "timetickets.labels.shift" ? t(value) : value}
        {...props}
        disabled={value === "timetickets.labels.shift"}
      >
        {emps &&
          emps.rates.map((item) => (
            <Select.Option key={item.cost_center} value={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>
    );
  };

  const MemoInput = ({ value, ...props }) => {
    return (
      <Input
        value={value?.startsWith("timetickets.") ? t(value) : value}
        {...props}
        disabled={value?.startsWith("timetickets.")}
      />
    );
  };

  return (
    <div>
      <LayoutFormRow grow noDivider>
        <Form.Item shouldUpdate>
          {() => (
            <Form.Item
              name="jobid"
              label={t("timetickets.fields.ro_number")}
              rules={[
                {
                  required: !(
                    form.getFieldValue("cost_center") ===
                    "timetickets.labels.shift"
                  ),
                  //message: t("general.validation.required"),
                },
              ]}
            >
              <JobSearchSelect
                convertedOnly={true}
                notExported={!bodyshop.tt_allow_post_to_invoiced}
                notInvoiced={!bodyshop.tt_allow_post_to_invoiced}
              />
            </Form.Item>
          )}
        </Form.Item>
        <Form.Item
          label={t("timetickets.fields.date")}
          name="date"
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
        >
          <FormDatePicker />
        </Form.Item>
        <Form.Item
          name="employeeid"
          label={t("timetickets.fields.employee")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
        >
          <EmployeeSearchSelect
            disabled={employeeSelectDisabled}
            options={employeeAutoCompleteOptions}
            onSelect={(value) => {
              const emps =
                employeeAutoCompleteOptions &&
                employeeAutoCompleteOptions.filter((e) => e.id === value)[0];

              form.setFieldsValue({ flat_rate: emps && emps.flat_rate });
            }}
          />
        </Form.Item>
        <Form.Item
          shouldUpdate={(prev, cur) => prev.employeeid !== cur.employeeid}
        >
          {() => {
            const employeeId = form.getFieldValue("employeeid");
            const emps =
              employeeAutoCompleteOptions &&
              employeeAutoCompleteOptions.filter((e) => e.id === employeeId)[0];

            return (
              <Form.Item
                name="cost_center"
                label={t("timetickets.fields.cost_center")}
                valuePropName="value"
                rules={[
                  {
                    required: true,
                    //message: t("general.validation.required"),
                  },
                ]}
              >
                <CostCenterSelect emps={emps} />
              </Form.Item>
            );
          }}
        </Form.Item>

        <Form.Item
          name="flat_rate"
          label={t("timetickets.fields.flat_rate")}
          valuePropName="checked"
          noStyle
          style={{ display: "none" }}
        >
          <Switch style={{ display: "none" }} />
        </Form.Item>
      </LayoutFormRow>

      <LayoutFormRow>
        <Form.Item shouldUpdate>
          {() => (
            <Form.Item
              label={t("timetickets.fields.productivehrs")}
              name="productivehrs"
              rules={[
                ({ getFieldValue }) => ({
                  validator(rule, value) {
                    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();
                    }
                  },
                }),
                {
                  required:
                    form.getFieldValue("cost_center") !==
                    "timetickets.labels.shift",
                  //message: t("general.validation.required"),
                },
              ]}
            >
              <InputNumber precision={1} />
            </Form.Item>
          )}
        </Form.Item>
        <Form.Item
          dependencies={["productivehrs"]}
          label={t("timetickets.fields.actualhrs")}
          name="actualhrs"
          rules={[
            ({ getFieldValue }) => ({
              async validator(rule, value) {
                if (value) {
                  const prodHrs = getFieldValue("productivehrs");
                  if (prodHrs < 0 && value !== 0)
                    return Promise.reject(
                      t("timetickets.labels.zeroactualnegativeprod")
                    );
                  else {
                    return Promise.resolve();
                  }
                } else {
                  return Promise.resolve();
                }
              },
            }),
          ]}
        >
          <InputNumber min={0} precision={1} />
        </Form.Item>
        {
          <>
            <Form.Item label={t("timetickets.fields.clockon")} name="clockon">
              <FormDateTimePicker
                minuteStep={5}
                disabled={
                  !HasRbacAccess({
                    bodyshop,
                    authLevel,
                    action: "timetickets:shiftedit",
                  })
                }
              />
            </Form.Item>
            <Form.Item
              label={t("timetickets.fields.clockoff")}
              name="clockoff"
              rules={[
                ({ getFieldValue }) => ({
                  validator(rule, value) {
                    const clockon = getFieldValue("clockon");

                    if (!value) return Promise.resolve();
                    if (!clockon && value)
                      return Promise.reject(
                        t("timetickets.validation.clockoffwithoutclockon")
                      );
                    if (
                      value &&
                      value.isSameOrAfter &&
                      !value.isSameOrAfter(clockon)
                    )
                      return Promise.reject(
                        t("timetickets.validation.clockoffmustbeafterclockon")
                      );

                    return Promise.resolve();
                  },
                }),
              ]}
            >
              <FormDateTimePicker
                minuteStep={5}
                disabled={
                  !HasRbacAccess({
                    bodyshop,
                    authLevel,
                    action: "timetickets:shiftedit",
                  })
                }
              />
            </Form.Item>
          </>
        }

        <Form.Item label={t("timetickets.fields.memo")} name="memo">
          <MemoInput />
        </Form.Item>
        <Form.Item shouldUpdate>
          {() => (
            <Form.Item
              name="ciecacode"
              label={t("timetickets.fields.ciecacode")}
              rules={[
                {
                  required:
                    !form.getFieldValue("cost_center") ===
                    "timetickets.labels.shift",
                  //message: t("general.validation.required"),
                },
              ]}
            >
              <Input disabled />
            </Form.Item>
          )}
        </Form.Item>
      </LayoutFormRow>
      <Form.Item dependencies={["jobid"]}>
        {() => {
          const jobid = form.getFieldValue("jobid");
          if (
            (!called && jobid) ||
            (jobid && lineTicketData?.jobs_by_pk?.id !== jobid && !loading)
          ) {
            loadLineTicketData({ variables: { id: jobid } });
          }
          return (
            <LaborAllocationContainer
              jobid={jobid || null}
              loading={loading}
              lineTicketData={lineTicketData}
            />
          );
        }}
      </Form.Item>
    </div>
  );
}

export function LaborAllocationContainer({ jobid, loading, lineTicketData }) {
  if (loading) return <LoadingSkeleton />;
  if (!lineTicketData) return null;
  return (
    <div>
      <LaborAllocationsTable
        jobId={jobid}
        joblines={lineTicketData.joblines}
        timetickets={lineTicketData.timetickets}
        adjustments={lineTicketData.jobs_by_pk.lbr_adjustments}
      />

      <TimeTicketList
        loading={loading}
        timetickets={lineTicketData.timetickets}
        techConsole
      />
    </div>
  );
}