import { Table } from "antd";
import { useTranslation } from "react-i18next";
import JobLineNotePopup from "../job-line-note-popup/job-line-note-popup.component";
import PartsStatusPie from "../parts-status-pie/parts-status-pie.component";
import CardTemplate from "./job-detail-cards.template.component";

import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectJobReadOnly } from "../../redux/application/application.selectors";
import { onlyUnique } from "../../utils/arrayHelper";
import { alphaSort } from "../../utils/sorters";
import JobLineLocationPopup from "../job-line-location-popup/job-line-location-popup.component";
import JobLineStatusPopup from "../job-line-status-popup/job-line-status-popup.component";

const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  jobRO: selectJobReadOnly
});
const mapDispatchToProps = () => ({});

function JobDetailCardsPartsComponent({ loading, data, jobRO }) {
  const { t } = useTranslation();
  const { joblines_status } = data;

  const filteredJobLines = data.joblines.filter(
    (j) =>
      j.part_type !== null &&
      j.part_type !== "PAE" &&
      j.part_type !== "PAS" &&
      j.part_type !== "PASL" &&
      j.part_qty !== 0 &&
      j.act_price !== 0
  );
  //TODO: Correct jobline_statuses view by including the part_qty !== 0 and act_price !== 0
  const columns = [
    {
      title: t("joblines.fields.line_desc"),
      dataIndex: "line_desc",
      fixed: "left",
      key: "line_desc",
      sorter: (a, b) => alphaSort(a.line_desc, b.line_desc),
      onCell: (record) => ({
        className: record.manual_line && "job-line-manual",
        style: {
          ...(record.critical ? { boxShadow: " -.5em 0 0 #FFC107" } : {})
        }
      }),
      width: "30%",
      ellipsis: true
    },
    {
      title: t("joblines.fields.part_type"),
      dataIndex: "part_type",
      key: "part_type",
      width: "15%",
      sorter: (a, b) =>
        alphaSort(t(`joblines.fields.part_types.${a.part_type}`), t(`joblines.fields.part_types.${b.part_type}`)),
      render: (text, record) => (record.part_type ? t(`joblines.fields.part_types.${record.part_type}`) : null)
    },
    {
      title: t("joblines.fields.part_qty"),
      dataIndex: "part_qty",
      key: "part_qty",
      width: "10%"
    },
    {
      title: t("joblines.fields.notes"),
      dataIndex: "notes",
      key: "notes",
      render: (text, record) => <JobLineNotePopup disabled={jobRO} jobline={record} />
    },
    {
      title: t("joblines.fields.location"),
      dataIndex: "location",
      key: "location",
      sorter: (a, b) => alphaSort(a.location, b.location),
      render: (text, record) => <JobLineLocationPopup jobline={record} disabled={jobRO} />
    },
    {
      title: t("joblines.fields.status"),
      dataIndex: "status",
      key: "status",
      sorter: (a, b) => alphaSort(a.status, b.status),
      filters:
        (data &&
          data.joblines
            ?.map((l) => l.status)
            .filter(onlyUnique)
            .map((s) => {
              return {
                text: s || t("dashboard.errors.status"),
                value: [s]
              };
            })) ||
        [],
      onFilter: (value, record) => value.includes(record.status),
      render: (text, record) => <JobLineStatusPopup jobline={record} disabled={jobRO} />
    }
  ];
  return (
    <div>
      <CardTemplate loading={loading} title={t("jobs.labels.cards.parts")}>
        <PartsStatusPie joblines_status={joblines_status} />
        <Table rowKey="id" columns={columns} dataSource={filteredJobLines || []} />
      </CardTemplate>
    </div>
  );
}

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