import { useQuery } from "@apollo/client";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { QUERY_EMPLOYEES } from "../../graphql/employees.queries";
import AlertComponent from "../alert/alert.component";
import ShopEmployeesFormComponent from "./shop-employees-form.component";
import ShopEmployeesListComponent from "./shop-employees-list.component";
import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";

const mapStateToProps = createStructuredSelector({});

function ShopEmployeesContainer() {
  const { loading, error, data } = useQuery(QUERY_EMPLOYEES, {
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only"
  });

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

  return (
    <div>
      <RbacWrapper action="employees:page">
        <ShopEmployeesListComponent employees={data ? data.employees : []} loading={loading} />
        <ShopEmployeesFormComponent />
      </RbacWrapper>
    </div>
  );
}

export default connect(mapStateToProps, null)(ShopEmployeesContainer);
