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

const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
});
const mapDispatchToProps = (dispatch) => ({
  setInvoiceEnterContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "invoiceEnter" })),
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(function JobsDetailPliComponent({
  setInvoiceEnterContext,
  job,
  invoicesQuery,
}) {
  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}
        invoices={invoicesQuery.data ? invoicesQuery.data.invoices : null}
      />
    </div>
  );
});
