import { Button } from "antd";
import React from "react";
import { connect } from "react-redux";
import { setModalContext } from "../../redux/modals/modals.actions";
import AlertComponent from "../alert/alert.component";
import InvoicesListTableComponent from "../invoices-list-table/invoices-list-table.component";

const mapDispatchToProps = (dispatch) => ({
  setInvoiceEnterContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "invoiceEnter" })),
});

export function JobsDetailPliComponent({
  setInvoiceEnterContext,
  job,
  invoicesQuery,
  handleOnRowClick,
  selectedInvoice,
}) {
  return (
    <div>
      <Button
        onClick={() => {
          setInvoiceEnterContext({
            actions: { refetch: invoicesQuery.refetch || null },
            context: {
              job,
            },
          });
        }}
      >
        Enter Invoice
      </Button>
      {invoicesQuery.error ? (
        <AlertComponent message={invoicesQuery.error.message} type="error" />
      ) : null}
      <InvoicesListTableComponent
        loading={invoicesQuery.loading}
        handleOnRowClick={handleOnRowClick}
        selectedInvoice={selectedInvoice}
        invoices={invoicesQuery.data ? invoicesQuery.data.invoices : null}
        refetch={invoicesQuery.refetch}
      />
    </div>
  );
}

export default connect(null, mapDispatchToProps)(JobsDetailPliComponent);