import { useQuery } from "@apollo/client";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { QUERY_TEAMS } from "../../graphql/employee_teams.queries";
import { selectBodyshop } from "../../redux/user/user.selectors";
import AlertComponent from "../alert/alert.component";
import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
import ShopEmployeeTeamsListComponent from "./shop-employee-teams.list";
import ShopEmployeeTeamsFormComponent from "./shop-employee-teams.form.component";
import { Col, Row } from "antd";

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

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

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

  return (
    <div>
      <RbacWrapper action="employee_teams:page">
        <Row gutter={[16, 16]}>
          <Col span={6}>
            <ShopEmployeeTeamsListComponent employee_teams={data ? data.employee_teams : []} loading={loading} />
          </Col>
          <Col span={18}>
            <ShopEmployeeTeamsFormComponent />
          </Col>
        </Row>
      </RbacWrapper>
    </div>
  );
}

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