import { ClockCircleOutlined } from "@ant-design/icons";
import { useApolloClient } from "@apollo/client";
import {
  Button,
  Card,
  Form,
  notification,
  Popover,
  Select,
  Space,
  Tooltip,
} from "antd";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { logImEXEvent } from "../../firebase/firebase.utils";
import {
  QUERY_JOB_LBR_ADJUSTMENTS,
  UPDATE_JOB,
} from "../../graphql/jobs.queries";

import _ from "lodash";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
import { insertAuditTrail } from "../../redux/application/application.actions";
import { selectTechnician } from "../../redux/tech/tech.selectors";
import AuditTrailMapping from "../../utils/AuditTrailMappings";

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

const mapDispatchToProps = (dispatch) => ({
  insertAuditTrail: ({ jobid, operation, type }) =>
    dispatch(insertAuditTrail({ jobid, operation, type })),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(JobLineConvertToLabor);

export function JobLineConvertToLabor({
  children,
  jobline,
  job,
  insertAuditTrail,
  technician,
  ...otherBtnProps
}) {
  const { t } = useTranslation();

  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();
  const [visibility, setVisibility] = useState(false);
  const client = useApolloClient();

  const handleFinish = async (values) => {
    const { mod_lbr_ty } = values;
    logImEXEvent("job_convert_dollar_to_labor");

    setLoading(true);

    const existingAdjustments = await client.query({
      query: QUERY_JOB_LBR_ADJUSTMENTS,
      variables: {
        id: job.id,
      },
    });

    const newAdjustments = _.cloneDeep(
      existingAdjustments.data.jobs_by_pk.lbr_adjustments
    );
    const adjustment = calculateAdjustment({ mod_lbr_ty, job, jobline });
    newAdjustments[mod_lbr_ty] = (newAdjustments[mod_lbr_ty] || 0) + adjustment;

    const jobUpdate = client.mutate({
      mutation: UPDATE_JOB,
      variables: {
        jobId: job.id,
        job: { lbr_adjustments: newAdjustments },
      },
    });

    const lineUpdate = client.mutate({
      mutation: UPDATE_JOB_LINE,
      variables: {
        lineId: jobline.id,
        line: {
          convertedtolbr: true,
          convertedtolbr_data: {
            mod_lbr_ty: mod_lbr_ty,
            mod_lb_hrs: adjustment,
          },
        },
      },
    });

    if (!!jobUpdate.errors) {
      notification["error"]({
        message: t("jobs.errors.saving", {
          message: JSON.stringify(jobUpdate.errors),
        }),
      });
      return;
    }
    if (!!lineUpdate.errors) {
      notification["error"]({
        message: t("joblines.errors.saving", {
          message: JSON.stringify(lineUpdate.errors),
        }),
      });
      return;
    }
    insertAuditTrail({
      jobid: job.id,
      operation: AuditTrailMapping.jobmodifylbradj({
        hours: calculateAdjustment({ mod_lbr_ty, job, jobline }).toFixed(1),
        mod_lbr_ty,
      }),
      type: "jobmodifylbradj",
    });
    setLoading(false);
    setVisibility(false);
  };

  const overlay = (
    <Card>
      <Form form={form} layout="vertical" onFinish={handleFinish}>
        <Form.Item
          label={t("joblines.fields.mod_lbr_ty")}
          name="mod_lbr_ty"
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
        >
          <Select allowClear optionFilterProp="children" showSearch>
            <Select.Option value="LAA">
              {t("joblines.fields.lbr_types.LAA")}
            </Select.Option>
            <Select.Option value="LAB">
              {t("joblines.fields.lbr_types.LAB")}
            </Select.Option>
            <Select.Option value="LAD">
              {t("joblines.fields.lbr_types.LAD")}
            </Select.Option>
            <Select.Option value="LAE">
              {t("joblines.fields.lbr_types.LAE")}
            </Select.Option>
            <Select.Option value="LAF">
              {t("joblines.fields.lbr_types.LAF")}
            </Select.Option>
            <Select.Option value="LAG">
              {t("joblines.fields.lbr_types.LAG")}
            </Select.Option>
            <Select.Option value="LAM">
              {t("joblines.fields.lbr_types.LAM")}
            </Select.Option>
            <Select.Option value="LAR">
              {t("joblines.fields.lbr_types.LAR")}
            </Select.Option>
            <Select.Option value="LAS">
              {t("joblines.fields.lbr_types.LAS")}
            </Select.Option>
            <Select.Option value="LAU">
              {t("joblines.fields.lbr_types.LAU")}
            </Select.Option>
            <Select.Option value="LA1">
              {t("joblines.fields.lbr_types.LA1")}
            </Select.Option>
            <Select.Option value="LA2">
              {t("joblines.fields.lbr_types.LA2")}
            </Select.Option>
            <Select.Option value="LA3">
              {t("joblines.fields.lbr_types.LA3")}
            </Select.Option>
            <Select.Option value="LA4">
              {t("joblines.fields.lbr_types.LA4")}
            </Select.Option>
          </Select>
        </Form.Item>

        <Form.Item shouldUpdate>
          {() => {
            const { mod_lbr_ty } = form.getFieldsValue();
            return t("joblines.labels.adjustmenttobeadded", {
              adjustment: calculateAdjustment({
                mod_lbr_ty,
                job,
                jobline,
              }).toFixed(1),
            });
          }}
        </Form.Item>

        <Space wrap>
          <Button
            type="primary"
            disabled={jobline.convertedtolbr}
            htmlType="submit"
          >
            {t("general.actions.save")}
          </Button>
          <Button onClick={() => setVisibility(false)}>
            {t("general.actions.cancel")}
          </Button>
        </Space>
      </Form>
    </Card>
  );

  const handleClick = (e) => {
    setLoading(true);

    form.setFieldsValue({
      //   date: new moment(),
      //   bodyhrs: Math.round(v.bodyhrs * 10) / 10,
      //   painthrs: Math.round(v.painthrs * 10) / 10,
    });
    setVisibility(true);
    setLoading(false);
  };

  return (
    <>
      {children}
      {jobline.act_price !== 0 && !technician && (
        <Popover
          disabled={jobline.convertedtolbr}
          content={overlay}
          visible={visibility}
          placement="bottom"
        >
          <Tooltip title={t("joblines.actions.converttolabor")}>
            <Button
              type="link"
              disabled={jobline.convertedtolbr}
              loading={loading}
              onClick={handleClick}
              {...otherBtnProps}
            >
              <ClockCircleOutlined />
            </Button>
          </Tooltip>
        </Popover>
      )}
    </>
  );
}

function calculateAdjustment({ mod_lbr_ty, job, jobline }) {
  if (!mod_lbr_ty) return 0;
  const rate = job[`rate_${mod_lbr_ty.toLowerCase()}`];

  if (rate === 0 || rate === null || rate === undefined) return 0;
  const adj = jobline.act_price / job[`rate_${mod_lbr_ty.toLowerCase()}`];

  return adj;
}