import { Button, Table } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import Dinero from "dinero.js";
const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(DmsAllocationsSummary);

export function DmsAllocationsSummary({ socket, bodyshop, jobId }) {
  const { t } = useTranslation();
  const [allocationsSummary, setAllocationsSummary] = useState([]);
  const columns = [
    {
      title: t("jobs.fields.dms.center"),
      dataIndex: "center",
      key: "center",
    },
    {
      title: t("jobs.fields.dms.sale"),
      dataIndex: "sale",
      key: "sale",
      render: (text, record) => Dinero(record.sale).toFormat(),
    },
    {
      title: t("jobs.fields.dms.cost"),
      dataIndex: "cost",
      key: "cost",
      render: (text, record) => Dinero(record.cost).toFormat(),
    },
    {
      title: t("jobs.fields.dms.sale_dms_acctnumber"),
      dataIndex: "sale_dms_acctnumber",
      key: "sale_dms_acctnumber",
      render: (text, record) =>
        record.profitCenter && record.profitCenter.dms_acctnumber,
    },
    {
      title: t("jobs.fields.dms.cost_dms_acctnumber"),
      dataIndex: "cost_dms_acctnumber",
      key: "cost_dms_acctnumber",
      render: (text, record) =>
        record.costCenter && record.costCenter.dms_acctnumber,
    },
    {
      title: t("jobs.fields.dms.dms_wip_acctnumber"),
      dataIndex: "dms_wip_acctnumber",
      key: "dms_wip_acctnumber",
      render: (text, record) =>
        record.costCenter && record.costCenter.dms_wip_acctnumber,
    },
  ];

  return (
    <Table
      title={() => (
        <Button
          onClick={() => {
            socket.emit("cdk-calculate-allocations", jobId, (ack) =>
              setAllocationsSummary(ack)
            );
          }}
        >
          Get
        </Button>
      )}
      pagination={{ position: "top", defaultPageSize: 50 }}
      columns={columns}
      rowKey="center"
      dataSource={allocationsSummary}
    />
  );
}