import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import useSWR from "swr";
// buzzwareTech imports
import {
    ISSUE_DISPLAY_FILTERS_BY_PAGE,
    PROJECT_VIEW_TRACKER_ELEMENTS,
} from "@buzzwaretech/constants";
import { EIssueLayoutTypes, EIssuesStoreType } from "@buzzwaretech/types";
import { ERowVariant, Row } from "@buzzwaretech/ui";
// hooks
import { ProjectLevelWorkItemFiltersHOC } from "@/components/work-item-filters/filters-hoc/project-level";
import { WorkItemFiltersRow } from "@/components/work-item-filters/filters-row";
import { useIssues } from "@/hooks/store/use-issues";
import { IssuesStoreContext } from "@/hooks/use-issue-layout-store";
// local imports
import { IssuePeekOverview } from "../../peek-overview";
import { ModuleCalendarLayout } from "../calendar/roots/module-root";
import { BaseGanttRoot } from "../gantt";
import { ModuleKanBanLayout } from "../kanban/roots/module-root";
import { ModuleListLayout } from "../list/roots/module-root";
import { ModuleSpreadsheetLayout } from "../spreadsheet/roots/module-root";

function ModuleIssueLayout(props: {
  activeLayout: EIssueLayoutTypes | undefined;
  moduleId: string;
}) {
  switch (props.activeLayout) {
    case EIssueLayoutTypes.LIST:
      return <ModuleListLayout />;
    case EIssueLayoutTypes.KANBAN:
      return <ModuleKanBanLayout />;
    case EIssueLayoutTypes.CALENDAR:
      return <ModuleCalendarLayout />;
    case EIssueLayoutTypes.GANTT:
      return <BaseGanttRoot viewId={props.moduleId} />;
    case EIssueLayoutTypes.SPREADSHEET:
      return <ModuleSpreadsheetLayout />;
    default:
      return null;
  }
}

export const ModuleLayoutRoot = observer(function ModuleLayoutRoot() {
  // router
  const {
    workspaceSlug: routerWorkspaceSlug,
    projectId: routerProjectId,
    moduleId: routerModuleId,
  } = useParams();
  const workspaceSlug = routerWorkspaceSlug
    ? routerWorkspaceSlug.toString()
    : undefined;
  const projectId = routerProjectId ? routerProjectId.toString() : undefined;
  const moduleId = routerModuleId ? routerModuleId.toString() : undefined;
  // hooks
  const { issuesFilter } = useIssues(EIssuesStoreType.MODULE);
  // derived values
  const workItemFilters = moduleId
    ? issuesFilter?.getIssueFilters(moduleId)
    : undefined;
  const activeLayout = workItemFilters?.displayFilters?.layout || undefined;

  useSWR(
    workspaceSlug && projectId && moduleId
      ? `MODULE_ISSUES_${workspaceSlug.toString()}_${projectId.toString()}_${moduleId.toString()}`
      : null,
    async () => {
      if (workspaceSlug && projectId && moduleId) {
        await issuesFilter?.fetchFilters(
          workspaceSlug.toString(),
          projectId.toString(),
          moduleId.toString(),
        );
      }
    },
    { revalidateIfStale: false, revalidateOnFocus: false },
  );

  if (!workspaceSlug || !projectId || !moduleId || !workItemFilters)
    return <></>;
  return (
    <IssuesStoreContext.Provider value={EIssuesStoreType.MODULE}>
      <ProjectLevelWorkItemFiltersHOC
        enableSaveView
        entityType={EIssuesStoreType.MODULE}
        entityId={moduleId}
        filtersToShowByLayout={ISSUE_DISPLAY_FILTERS_BY_PAGE.issues.filters}
        initialWorkItemFilters={workItemFilters}
        updateFilters={issuesFilter?.updateFilterExpression.bind(
          issuesFilter,
          workspaceSlug,
          projectId,
          moduleId,
        )}
        projectId={projectId}
        workspaceSlug={workspaceSlug}
      >
        {({ filter: moduleWorkItemsFilter }) => (
          <div className="relative flex h-full w-full flex-col overflow-hidden">
            {moduleWorkItemsFilter && (
              <WorkItemFiltersRow
                filter={moduleWorkItemsFilter}
                trackerElements={{
                  saveView:
                    PROJECT_VIEW_TRACKER_ELEMENTS.MODULE_HEADER_SAVE_AS_VIEW_BUTTON,
                }}
              />
            )}
            <Row
              variant={ERowVariant.HUGGING}
              className="h-full w-full overflow-auto"
            >
              <ModuleIssueLayout
                activeLayout={activeLayout}
                moduleId={moduleId}
              />
            </Row>
            {/* peek overview */}
            <IssuePeekOverview />
          </div>
        )}
      </ProjectLevelWorkItemFiltersHOC>
    </IssuesStoreContext.Provider>
  );
});