import { useQuery } from "@apollo/client";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import AccountingPaymentsTable from "../../components/accounting-payments-table/accounting-payments-table.component";
import AlertComponent from "../../components/alert/alert.component";
import { QUERY_PAYMENTS_FOR_EXPORT } from "../../graphql/accounting.queries";
import {
  setBreadcrumbs,
  setSelectedHeader,
} from "../../redux/application/application.actions";
import { selectBodyshop } from "../../redux/user/user.selectors";
import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
import { checkPartnerStatus } from "../../components/partner-ping/partner-ping.component";
import { selectPartnerVersion } from "../../redux/application/application.selectors";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  partnerVersion: selectPartnerVersion,
});

const mapDispatchToProps = (dispatch) => ({
  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
});
export function AccountingPaymentsContainer({
  bodyshop,
  setBreadcrumbs,
  setSelectedHeader,
  partnerVersion,
}) {
  const { t } = useTranslation();

  useEffect(() => {
    document.title = t("titles.accounting-payments");
    setSelectedHeader("payments");
    setBreadcrumbs([
      {
        link: "/manage/accounting/payments",
        label: t("titles.bc.accounting-payments"),
      },
    ]);
    checkPartnerStatus(bodyshop, true);
  }, [t, setBreadcrumbs, setSelectedHeader, bodyshop]);

  const { loading, error, data, refetch } = useQuery(
    QUERY_PAYMENTS_FOR_EXPORT,
    {
      fetchPolicy: "network-only",
      nextFetchPolicy: "network-only",
    }
  );

  if (error) return <AlertComponent message={error.message} type="error" />;
  const noPath =
    !partnerVersion?.qbpath &&
    !(
      bodyshop &&
      (bodyshop.cdk_dealerid ||
        bodyshop.pbs_serialnumber ||
        bodyshop.accountingconfig.qbo)
    );
  return (
    <div>
      <RbacWrapper action="accounting:payments">
        {noPath && (
          <AlertComponent
            type="error"
            message={t("general.messages.noacctfilepath")}
          />
        )}
        <AccountingPaymentsTable
          loadaing={loading}
          payments={data ? data.payments : []}
          refetch={refetch}
        />
      </RbacWrapper>
    </div>
  );
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(AccountingPaymentsContainer);
