import { Alert, Button, Card, Col, Row, Space, Typography } from "antd";
import ResponsiveTable from "../responsive-table/responsive-table.component";
import { SyncOutlined } from "@ant-design/icons";
import axios from "axios";
import _ from "lodash";
import { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectTechnician } from "../../redux/tech/tech.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import "./labor-allocations-table.styles.scss";
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

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

const getRequestErrorMessage = (error) => error?.response?.data?.error || error?.message || "";

export function PayrollLaborAllocationsTable({
  jobId,
  joblines,
  timetickets,
  bodyshop,
  adjustments,
  refetch,
  showWarning,
  warningCallback
}) {
  const { t } = useTranslation();
  const [totals, setTotals] = useState([]);
  const [state, setState] = useState({
    sortedInfo: {
      columnKey: "cost_center",
      field: "cost_center",
      order: "ascend"
    },
    filteredInfo: {}
  });
  const notification = useNotification();

  const loadTotals = async () => {
    try {
      const { data } = await axios.post("/payroll/calculatelabor", {
        jobid: jobId
      });
      setTotals(data);
    } catch (error) {
      setTotals([]);
      notification.error({
        title: getRequestErrorMessage(error)
      });
    }
  };

  useEffect(() => {
    if (!!joblines && !!timetickets && !!bodyshop) {
      loadTotals();
    }
    if (!jobId) setTotals([]);
  }, [joblines, timetickets, bodyshop, adjustments, jobId]);

  const convertedLines = useMemo(() => joblines && joblines.filter((j) => j.convertedtolbr), [joblines]);

  const columns = [
    {
      title: t("timetickets.fields.employee"),
      dataIndex: "employeeid",
      key: "employeeid",
      render: (text, record) => {
        if (record.employeeid === undefined) {
          return <span style={{ color: "tomato", fontWeight: "bolder" }}>{t("timetickets.labels.unassigned")}</span>;
        }
        const emp = bodyshop.employees.find((e) => e.id === record.employeeid);
        return `${emp?.first_name} ${emp?.last_name}`;
      }
    },
    {
      title: t("joblines.fields.mod_lbr_ty"),
      dataIndex: "mod_lbr_ty",
      key: "mod_lbr_ty",
      render: (text, record) =>
        record.employeeid === undefined ? (
          <span style={{ color: "tomato", fontWeight: "bolder" }}>{t("timetickets.labels.unassigned")}</span>
        ) : (
          t(`joblines.fields.lbr_types.${record.mod_lbr_ty?.toUpperCase()}`)
        )
    },
    // {
    //   title: t("timetickets.fields.rate"),
    //   dataIndex: "rate",
    //   key: "rate",
    // },
    {
      title: t("jobs.labels.hrs_total"),
      dataIndex: "expectedHours",
      key: "expectedHours",
      sorter: (a, b) => a.expectedHours - b.expectedHours,
      sortOrder: state.sortedInfo.columnKey === "expectedHours" && state.sortedInfo.order,
      render: (text, record) => record.expectedHours.toFixed(5)
    },
    {
      title: t("jobs.labels.hrs_claimed"),
      dataIndex: "claimedHours",
      key: "claimedHours",
      sorter: (a, b) => a.claimedHours - b.claimedHours,
      sortOrder: state.sortedInfo.columnKey === "claimedHours" && state.sortedInfo.order,
      render: (text, record) => record.claimedHours && record.claimedHours.toFixed(5)
    },
    {
      title: t("jobs.labels.difference"),
      dataIndex: "difference",

      key: "difference",
      sorter: (a, b) => a.difference - b.difference,
      sortOrder: state.sortedInfo.columnKey === "difference" && state.sortedInfo.order,
      render: (text, record) => {
        const difference = _.round(record.expectedHours - record.claimedHours, 5);

        return (
          <strong
            style={{
              color: difference >= 0 ? "green" : "red"
            }}
          >
            {difference}
          </strong>
        );
      }
    }
  ];
  const convertedTableCols = [
    {
      title: t("joblines.fields.line_desc"),
      dataIndex: "line_desc",
      key: "line_desc",
      ellipsis: true
    },
    {
      title: t("joblines.fields.op_code_desc"),
      dataIndex: "op_code_desc",
      key: "op_code_desc",
      ellipsis: true,
      render: (text, record) => `${record.op_code_desc || ""}${record.alt_partm ? ` ${record.alt_partm}` : ""}`
    },

    {
      title: t("joblines.fields.act_price"),
      dataIndex: "act_price",
      key: "act_price",
      ellipsis: true,
      render: (text, record) => (
        <>
          <CurrencyFormatter>
            {record.db_ref === "900510" || record.db_ref === "900511" ? record.prt_dsmk_m : record.act_price}
          </CurrencyFormatter>
          {record.prt_dsmk_p && record.prt_dsmk_p !== 0 ? (
            <span style={{ marginLeft: ".2rem" }}>{`(${record.prt_dsmk_p}%)`}</span>
          ) : (
            <></>
          )}
        </>
      )
    },
    {
      title: t("joblines.fields.part_qty"),
      dataIndex: "part_qty",
      key: "part_qty"
    },
    {
      title: t("joblines.fields.mod_lbr_ty"),
      dataIndex: "conv_mod_lbr_ty",
      key: "conv_mod_lbr_ty",
      render: (text, record) => record.convertedtolbr_data?.mod_lbr_ty
    },
    {
      title: t("joblines.fields.mod_lb_hrs"),
      dataIndex: "conv_mod_lb_hrs",
      key: "conv_mod_lb_hrs",
      render: (text, record) =>
        record.convertedtolbr_data?.mod_lb_hrs && record.convertedtolbr_data.mod_lb_hrs.toFixed(5)
    }
  ];

  const handleTableChange = (pagination, filters, sorter) => {
    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
  };

  const summary =
    totals &&
    totals.reduce(
      (acc, val) => {
        acc.hrs_total += val.expectedHours;
        acc.hrs_claimed += val.claimedHours;
        // acc.adjustments += val.adjustments;
        acc.difference += val.expectedHours - val.claimedHours;
        return acc;
      },
      { hrs_total: 0, hrs_claimed: 0, adjustments: 0, difference: 0 }
    );

  if (summary.difference !== 0 && typeof warningCallback === "function") {
    warningCallback({ key: "labor", warning: t("jobs.labels.outstandinghours") });
  }
  const hasTimeTicketAccess = HasFeatureAccess({ bodyshop, featureName: "timetickets" });
  return (
    <Row gutter={[16, 16]}>
      <Col span={24}>
        <Card
          title={t("jobs.labels.laborallocations")}
          extra={
            <Space>
              <Button
                disabled={!hasTimeTicketAccess}
                onClick={async () => {
                  try {
                    const response = await axios.post("/payroll/payall", {
                      jobid: jobId
                    });

                    if (response.status === 200) {
                      if (response.data.success !== false) {
                        notification.success({
                          title: t("timetickets.successes.payall")
                        });
                      } else {
                        notification.error({
                          title: t("timetickets.errors.payall", {
                            error: response.data.error
                          })
                        });
                      }

                      if (refetch) refetch();
                    } else {
                      notification.error({
                        title: t("timetickets.errors.payall", {
                          error: JSON.stringify("")
                        })
                      });
                    }
                  } catch (error) {
                    notification.error({
                      title: t("timetickets.errors.payall", {
                        error: getRequestErrorMessage(error)
                      })
                    });
                  }
                }}
              >
                <LockWrapperComponent featureName="timetickets">{t("timetickets.actions.payall")}</LockWrapperComponent>
              </Button>
              <Button
                onClick={async () => {
                  await loadTotals();
                  refetch();
                }}
                icon={<SyncOutlined />}
              />
            </Space>
          }
        >
          <ResponsiveTable
            columns={columns}
            mobileColumnKeys={["line_desc", "employeeid", "mod_lbr_ty", "rate"]}
            rowKey={(record) => `${record.employeeid} ${record.mod_lbr_ty}`}
            pagination={false}
            onChange={handleTableChange}
            dataSource={hasTimeTicketAccess ? totals : []}
            scroll={{
              x: true
            }}
            locale={{
              ...(!hasTimeTicketAccess && {
                emptyText: (
                  <Card>
                    <UpsellComponent upsell={upsellEnum().timetickets.allocations} />
                  </Card>
                )
              })
            }}
            summary={() => (
              <ResponsiveTable.Summary.Row>
                <ResponsiveTable.Summary.Cell>
                  <Typography.Title level={4}>{t("general.labels.totals")}</Typography.Title>
                </ResponsiveTable.Summary.Cell>
                <ResponsiveTable.Summary.Cell></ResponsiveTable.Summary.Cell>
                <ResponsiveTable.Summary.Cell>{summary.hrs_total.toFixed(5)}</ResponsiveTable.Summary.Cell>
                <ResponsiveTable.Summary.Cell>{summary.hrs_claimed.toFixed(5)}</ResponsiveTable.Summary.Cell>

                <ResponsiveTable.Summary.Cell>{summary.difference.toFixed(5)}</ResponsiveTable.Summary.Cell>
              </ResponsiveTable.Summary.Row>
            )}
          />
        </Card>
      </Col>
      {convertedLines && convertedLines.length > 0 && (
        <Col span={24}>
          <Card title={t("jobs.labels.convertedtolabor")}>
            <ResponsiveTable
              columns={convertedTableCols}
              mobileColumnKeys={["line_desc", "employeeid", "mod_lbr_ty", "rate"]}
              rowKey="id"
              pagination={false}
              dataSource={convertedLines}
              scroll={{
                x: true
              }}
            />
          </Card>
        </Col>
      )}
      {showWarning && summary.difference !== 0 && (
        <Alert style={{ margin: "8px 0px" }} type="warning" title={t("jobs.labels.outstandinghours")} />
      )}
    </Row>
  );
}

export default connect(mapStateToProps, null)(PayrollLaborAllocationsTable);
