import { Table } from "antd";
import Dinero from "dinero.js";
import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";

export default function JobTotalsTableTotals({ job }) {
  const { t } = useTranslation();

  const data = useMemo(() => {
    return [
      {
        key: t("jobs.labels.subtotal"),
        total: job.job_totals.totals.subtotal,
        bold: true,
      },
      {
        key: t("jobs.labels.local_tax_amt"),
        total: job.job_totals.totals.local_tax,
      },
      {
        key: t("jobs.labels.state_tax_amt"),
        total: job.job_totals.totals.state_tax,
      },
      {
        key: t("jobs.labels.federal_tax_amt"),
        total: job.job_totals.totals.federal_tax,
      },
      {
        key: t("jobs.labels.total_repairs"),
        total: job.job_totals.totals.total_repairs,
        bold: true,
      },
      {
        key: t("jobs.fields.ded_amt"),
        total: job.job_totals.totals.custPayable.deductible,
      },
      {
        key: t("jobs.fields.federal_tax_payable"),
        total: job.job_totals.totals.custPayable.federal_tax,
      },
      {
        key: t("jobs.fields.other_amount_payable"),
        total: job.job_totals.totals.custPayable.other_customer_amount,
      },
      {
        key: t("jobs.fields.depreciation_taxes"),
        total: job.job_totals.totals.custPayable.dep_taxes,
      },

      {
        key: t("jobs.labels.total_cust_payable"),
        total: job.job_totals.totals.custPayable.total,
        bold: true,
      },
      {
        key: t("jobs.labels.net_repairs"),
        total: job.job_totals.totals.net_repairs,
        bold: true,
      },
    ];
  }, [job.job_totals, t]);

  const columns = [
    {
      //title: t("joblines.fields.part_type"),
      dataIndex: "key",
      key: "key",
      width: "80%",
      onCell: (record, rowIndex) => {
        return { style: { fontWeight: record.bold && "bold" } };
      },
    },
    {
      title: t("joblines.fields.total"),
      dataIndex: "total",
      key: "total",
      align: "right",
      render: (text, record) => Dinero(record.total).toFormat(),
      width: "20%",
      onCell: (record, rowIndex) => {
        return { style: { fontWeight: record.bold && "bold" } };
      },
    },
  ];

  return (
    <Table
      columns={columns}
      rowKey="key"
      showHeader={false}
      pagination={false}
      dataSource={data}
      scroll={{
        x: true,
      }}
    />
  );
}