import { Button, Col, Popconfirm, Result, Row } from "antd";
import { useEffect, useState } from "react";
import GroupTasksViewModal from "./GroupTasksViewModal";
import GroupTypeSelectionModal from "./GroupTypeSelectionModal";
import GroupTaskTableList from "./GroupTasksTableList";
import {
  Constants,
  SentMessagesCommands,
  hasPermission,
  hasXYPermission,
  myFetch,
} from "../../../utils";
import { useTranslation } from "react-i18next";
import { ReloadOutlined } from "@ant-design/icons";
import { useGroupTasksContext } from "../../../Contexts/GroupTasksContext";
import { useAppContext } from "../../../Contexts/AppContext";
import { useWebSocketContext } from "../../../Contexts/WebSocketContext";
import { useParams } from "react-router-dom";

export default function GroupTasks({ isGroupTasksViewModalOpen }) {
  const webSocketContext = useWebSocketContext();
  const appContext = useAppContext();
  const groupTasksContext = useGroupTasksContext();
  const { paramCategory } = useParams();

  const [isGroupTypeSelectionModalOpen, setIsGroupTypeSelectionModalOpen] =
    useState(false);
  const [currentCategoryGroup, setCurrentCategoryGroup] = useState([]);
  const [currentSelectedModalGroupType, setCurrentSelectedModalGroupType] =
    useState();
  const { t } = useTranslation();

  const showGroupTypeSelectionModal = (categoryGroup) => {
    setCurrentCategoryGroup(categoryGroup);
    setIsGroupTypeSelectionModalOpen(true);
    setCurrentSelectedModalGroupType(null);
  };

  const filteredCategoryGroups = groupTasksContext.categoryGroups.filter(
    (categoryGroup) =>
      hasXYPermission(
        appContext.userPermissions,
        Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYView,
        categoryGroup.category
      )
  );

  const onCheckingForCategoryGroupChanges = () => {
    webSocketContext.SendSocketMessage(
      SentMessagesCommands.GroupTasksCheckingForCategoryGroupChanges,
      {}
    );
  };

  const onInstallGlobalPythonPackages = () => {
    webSocketContext.SendSocketMessage(
      SentMessagesCommands.GroupTasksInstallGlobalPythonPackages,
      {}
    );
  };

  useEffect(() => {
    myFetch(`/grouptasks/${paramCategory}`, "GET").then((data) => {
      console.log("group tasks", data);

      groupTasksContext.setCategoryGroups(data.CategoryGroups);
      groupTasksContext.setGroupTasks(data.GroupTasks);
      groupTasksContext.setGroupTasksSteps(data.GroupTasksSteps);
    });
  }, [paramCategory]);

  return (
    <>
      {groupTasksContext.categoryGroups.length === 0 ? (
        <Result status="404" title={t("groupTasks.categoryGroups.length0")} />
      ) : (
        <>
          {filteredCategoryGroups.length > 0 ? (
            <>
              <Row>
                <Col
                  xs={24}
                  sm={{ span: 10, offset: 14 }}
                  md={{ span: 8, offset: 16 }}
                >
                  {hasPermission(
                    appContext.userPermissions,
                    Constants.PERMISSIONS.GROUP_TASKS
                      .INSTALL_GLOBAL_PYTHON_PACKAGES
                  ) && (
                    <div
                      style={
                        {
                          // display: "flex",
                          // justifyContent: "flex-end",
                        }
                      }
                    >
                      <Popconfirm
                        placement="top"
                        okText={t("common.button.confirm")}
                        cancelText={t("common.button.cancel")}
                        title={t(
                          "groupTasks.button.installGlobalPythonPackages.popover.title"
                        )}
                        onConfirm={() => onInstallGlobalPythonPackages()}
                      >
                        <Button icon={<ReloadOutlined />} block>
                          {t(
                            "groupTasks.button.installGlobalPythonPackages.title"
                          )}
                        </Button>
                      </Popconfirm>
                    </div>
                  )}
                </Col>
              </Row>

              {filteredCategoryGroups.map((categoryGroup) => {
                return (
                  <GroupTaskTableList
                    key={categoryGroup.category}
                    categoryGroup={categoryGroup}
                    showGroupTypeSelectionModal={showGroupTypeSelectionModal}
                    groupTasks={groupTasksContext.groupTasks}
                  />
                );
              })}
            </>
          ) : (
            <Result
              key="result"
              status="403"
              title={t("groupTasks.categoryGroups.assignedToNoTask.title")}
              subTitle={t("common.contactAdmin")}
            />
          )}
        </>
      )}

      <GroupTypeSelectionModal
        isOpen={isGroupTypeSelectionModalOpen}
        setIsOpen={setIsGroupTypeSelectionModalOpen}
        categoryGroup={currentCategoryGroup}
        currentSelectedModalGroupType={currentSelectedModalGroupType}
        setCurrentSelectedModalGroupType={setCurrentSelectedModalGroupType}
      />

      <GroupTasksViewModal isOpen={isGroupTasksViewModalOpen} />

      {hasPermission(
        appContext.userPermissions,
        Constants.PERMISSIONS.GROUP_TASKS.CHECKING_FOR_CATEGORY_GROUP_CHANGES
      ) && (
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            marginTop: 20,
          }}
        >
          <Popconfirm
            placement="top"
            okText={t("common.button.confirm")}
            cancelText={t("common.button.cancel")}
            title={t(
              "groupTasks.button.checkingForCategoryGroupChanges.popover.title"
            )}
            onConfirm={() => onCheckingForCategoryGroupChanges()}
          >
            <Button shape="round" icon={<ReloadOutlined />} size="large">
              {t("groupTasks.button.checkingForCategoryGroupChanges.check")}
            </Button>
          </Popconfirm>
        </div>
      )}
    </>
  );
}