import { observer } from "mobx-react";
import { useMemo } from "react";
import useSWR from "swr";
// components
import { GroupList, ProjectStateLoader } from "@/components/project-states";
import { EUserPermissionsLevel } from "@buzzwaretech/constants";
import type { IState, TStateOperationsCallbacks } from "@buzzwaretech/types";
import { EUserProjectRoles } from "@buzzwaretech/types";
// hooks
import { useProjectState } from "@/hooks/store/use-project-state";
import { useUserPermissions } from "@/hooks/store/user";

type TProjectState = {
  workspaceSlug: string;
  projectId: string;
};

export const ProjectStateRoot = observer(function ProjectStateRoot(
  props: TProjectState,
) {
  const { workspaceSlug, projectId } = props;
  // hooks
  const {
    groupedProjectStates,
    fetchProjectStates,
    createState,
    moveStatePosition,
    updateState,
    deleteState,
    markStateAsDefault,
  } = useProjectState();
  const { allowPermissions } = useUserPermissions();
  // derived values
  const isEditable = allowPermissions(
    [EUserProjectRoles.ADMIN],
    EUserPermissionsLevel.PROJECT,
    workspaceSlug,
    projectId,
  );

  // Fetching all project states
  useSWR(
    workspaceSlug && projectId
      ? `PROJECT_STATES_${workspaceSlug}_${projectId}`
      : null,
    workspaceSlug && projectId
      ? () => fetchProjectStates(workspaceSlug.toString(), projectId.toString())
      : null,
    { revalidateIfStale: false, revalidateOnFocus: false },
  );

  // State operations callbacks
  const stateOperationsCallbacks: TStateOperationsCallbacks = useMemo(
    () => ({
      createState: async (data: Partial<IState>) =>
        createState(workspaceSlug, projectId, data),
      updateState: async (stateId: string, data: Partial<IState>) =>
        updateState(workspaceSlug, projectId, stateId, data),
      deleteState: async (stateId: string) =>
        deleteState(workspaceSlug, projectId, stateId),
      moveStatePosition: async (stateId: string, data: Partial<IState>) =>
        moveStatePosition(workspaceSlug, projectId, stateId, data),
      markStateAsDefault: async (stateId: string) =>
        markStateAsDefault(workspaceSlug, projectId, stateId),
    }),
    [
      workspaceSlug,
      projectId,
      createState,
      moveStatePosition,
      updateState,
      deleteState,
      markStateAsDefault,
    ],
  );

  // Loader
  if (!groupedProjectStates) return <ProjectStateLoader />;

  return (
    <GroupList
      groupedStates={groupedProjectStates}
      stateOperationsCallbacks={stateOperationsCallbacks}
      isEditable={isEditable}
      shouldTrackEvents
    />
  );
});