import { useMutation } from "@apollo/client";
import { Button, Checkbox, Form, notification, Popover, Tooltip } from "antd";
import axios from "axios";
import { t } from "i18next";
import React, { useState } from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { UPDATE_LINE_PPC } from "../../graphql/jobs-lines.queries";
import { selectTechnician } from "../../redux/tech/tech.selectors";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import InstanceRenderManager from "../../utils/instanceRenderMgr";
import CurrencyFormItemComponent from "../form-items-formatted/currency-form-item.component";
import JobLineConvertToLabor from "../job-line-convert-to-labor/job-line-convert-to-labor.component";

const mapStateToProps = createStructuredSelector({
  technician: selectTechnician
});
const mapDispatchToProps = (dispatch) => ({});

export function JobLinesPartPriceChange({ job, line, refetch, technician }) {
  const [loading, setLoading] = useState(false);
  const [updatePartPrice] = useMutation(UPDATE_LINE_PPC);

  const handleFinish = async (values) => {
    try {
      setLoading(true);
      const result = await updatePartPrice({
        variables: {
          id: line.id,
          jobline: {
            act_price_before_ppc: line.act_price_before_ppc ? line.act_price_before_ppc : line.act_price,
            act_price: values.act_price
          }
        }
      });
      await axios.post("/job/totalsssu", {
        id: job.id
      });
      if (result.errors) {
        notification.open({
          type: "error",
          message: t("joblines.errors.saving", {
            error: JSON.stringify(result.errors)
          })
        });
        if (refetch) refetch();
      } else {
        notification.open({
          type: "success",
          message: t("joblines.successes.saved")
        });
      }
    } catch (error) {
      notification.open({
        type: "error",
        message: t("joblines.errors.saving", { error: JSON.stringify(error) })
      });
    } finally {
      setLoading(false);
    }
  };

  const popcontent =
    !technician &&
    InstanceRenderManager({
      imex: null,
      rome: (
        <Form layout="vertical" onFinish={handleFinish} initialValues={{ act_price: line.act_price }}>
          <Form.Item name="act_price" label={t("jobs.labels.act_price_ppc")} rules={[{ required: true }]}>
            <CurrencyFormItemComponent />
          </Form.Item>
          <Button
            disabled={InstanceRenderManager({ imex: true, rome: false, promanager: true })}
            loading={loading}
            htmlType="primary"
          >
            {t("general.actions.save")}
          </Button>
        </Form>
      ),
      promanager: null
    });

  return (
    <JobLineConvertToLabor jobline={line} job={job}>
      <Popover trigger="click" disabled={true || line.manual_line} content={popcontent}>
        <CurrencyFormatter>
          {line.db_ref === "900510" || line.db_ref === "900511" ? line.prt_dsmk_m : line.act_price}
        </CurrencyFormatter>
        {line.prt_dsmk_p && line.prt_dsmk_p !== 0 ? (
          <span style={{ marginLeft: ".2rem" }}>{`(${line.prt_dsmk_p}%)`}</span>
        ) : (
          <></>
        )}
        {line.act_price_before_ppc && line.act_price_before_ppc !== 0 ? (
          <Tooltip title={t("jobs.labels.ppc")}>
            <span style={{ marginLeft: ".2rem", color: "tomato" }}>
              (<CurrencyFormatter>{line.act_price_before_ppc}</CurrencyFormatter>)
            </span>
          </Tooltip>
        ) : (
          <></>
        )}
      </Popover>
    </JobLineConvertToLabor>
  );
}
export default connect(mapStateToProps, mapDispatchToProps)(JobLinesPartPriceChange);