import { Drawer, Form, Grid } from "antd";
import { useQuery } from "@apollo/client/react";
import queryString from "query-string";
import { connect } from "react-redux";
import { useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import { QUERY_EMPLOYEES } from "../../graphql/employees.queries";
import useConfirmDirtyFormNavigation from "../../hooks/useConfirmDirtyFormNavigation.jsx";
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";
import "./shop-employees.styles.scss";

const mapStateToProps = createStructuredSelector({});

function ShopEmployeesContainer() {
  const [form] = Form.useForm();
  const [isEmployeeFormDirty, setIsEmployeeFormDirty] = useState(false);
  const location = useLocation();
  const navigate = useNavigate();
  const search = queryString.parse(location.search);
  const { loading, error, data } = useQuery(QUERY_EMPLOYEES, {
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only"
  });
  const screens = Grid.useBreakpoint();
  const hasSelectedEmployee = Boolean(search.employeeId);

  const bpoints = {
    xs: "100%",
    sm: "100%",
    md: "92%",
    lg: "80%",
    xl: "80%",
    xxl: "80%"
  };

  let drawerPercentage = "100%";
  if (screens.xxl) drawerPercentage = bpoints.xxl;
  else if (screens.xl) drawerPercentage = bpoints.xl;
  else if (screens.lg) drawerPercentage = bpoints.lg;
  else if (screens.md) drawerPercentage = bpoints.md;
  else if (screens.sm) drawerPercentage = bpoints.sm;
  else if (screens.xs) drawerPercentage = bpoints.xs;

  const hasDirtyEmployeeForm = Boolean(search.employeeId) && (isEmployeeFormDirty || form.isFieldsTouched());
  const confirmCloseDirtyEmployee = useConfirmDirtyFormNavigation(hasDirtyEmployeeForm);

  const navigateToEmployee = (employeeId) => {
    if (employeeId === search.employeeId) return;
    if (!confirmCloseDirtyEmployee()) return;

    const nextSearch = { ...search, employeeId };
    setIsEmployeeFormDirty(false);
    navigate({
      search: queryString.stringify(nextSearch)
    });
  };

  const handleDrawerClose = () => {
    if (!confirmCloseDirtyEmployee()) return;

    const nextSearch = { ...search };
    delete nextSearch.employeeId;
    setIsEmployeeFormDirty(false);
    navigate({
      search: queryString.stringify(nextSearch)
    });
  };

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

  return (
    <RbacWrapper action="employees:page">
      <div className="shop-employees-layout">
        <div className="shop-employees-layout__list">
          <ShopEmployeesListComponent
            employees={data ? data.employees : []}
            loading={loading}
            onRequestEmployeeChange={navigateToEmployee}
            selectedEmployeeId={search.employeeId}
          />
        </div>
      </div>
      <Drawer
        open={hasSelectedEmployee}
        destroyOnHidden
        placement="right"
        size={drawerPercentage}
        onClose={handleDrawerClose}
      >
        {hasSelectedEmployee ? (
          <ShopEmployeesFormComponent form={form} onDirtyChange={setIsEmployeeFormDirty} isDirty={isEmployeeFormDirty} />
        ) : null}
      </Drawer>
    </RbacWrapper>
  );
}

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