import { Row, Col } from "antd";
import { useQuery } from "@apollo/client";
import queryString from "query-string";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { useLocation } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import AlertComponent from "../../components/alert/alert.component";
import CsiResponseFormContainer from "../../components/csi-response-form/csi-response-form.container";
import CsiResponseListPaginated from "../../components/csi-response-list-paginated/csi-response-list-paginated.component";
import { QUERY_CSI_RESPONSE_PAGINATED } from "../../graphql/csi.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";
const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
});

const mapDispatchToProps = (dispatch) => ({
  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
});

export function ShopCsiContainer({
  bodyshop,
  setBreadcrumbs,
  setSelectedHeader,
}) {
  const { t } = useTranslation();

  const searchParams = queryString.parse(useLocation().search);
  const { page, sortcolumn, sortorder } = searchParams;

  const { loading, error, data, refetch } = useQuery(
    QUERY_CSI_RESPONSE_PAGINATED,
    {
      fetchPolicy: "network-only",
      nextFetchPolicy: "network-only",
      variables: {
        //search: search || "",
        offset: page ? (page - 1) * 25 : 0,
        limit: 25,
        order: [
          {
            [sortcolumn || "completedon"]: sortorder
              ? sortorder === "descend"
                ? "desc_nulls_last"
                : "asc"
              : "desc_nulls_last",
          },
        ],
      },
    }
  );

  useEffect(() => {
    document.title = t("titles.shop-csi");
    setSelectedHeader("shop-csi");
    setBreadcrumbs([
      {
        link: "/manage/shop",
        label: t("titles.bc.shop", { shopname: bodyshop.shopname }),
      },
      { link: "/manage/shop/csi", label: t("titles.bc.shop-csi") },
    ]);
  }, [t, setBreadcrumbs, bodyshop.shopname, setSelectedHeader]);

  if (error) return <AlertComponent message={error.message} type="error" />;

  return (
    <RbacWrapper
      action="csi:page"
      // noauth={
      //   <AlertComponent message="You don't have acess to see this screen." />
      // }
    >
      <Row gutter={16}>
        <Col span={10}>
          <CsiResponseListPaginated
            refetch={refetch}
            loading={loading}
            responses={data ? data.csi : []}
            total={data ? data.csi_aggregate.aggregate.count : 0}
          />
        </Col>
        <Col span={14}>
          <CsiResponseFormContainer />
        </Col>
      </Row>
    </RbacWrapper>
  );
}
export default connect(mapStateToProps, mapDispatchToProps)(ShopCsiContainer);
