import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import useSWR from "swr";
// buzzwareTech imports
import { ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@buzzwaretech/constants";
import { EIssuesStoreType } from "@buzzwaretech/types";
// components
import { ProjectLevelWorkItemFiltersHOC } from "@/components/work-item-filters/filters-hoc/project-level";
// hooks
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 { ArchivedIssueListLayout } from "../list/roots/archived-issue-root";

export const ArchivedIssueLayoutRoot = observer(
  function ArchivedIssueLayoutRoot() {
    // router
    const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId } =
      useParams();
    const workspaceSlug = routerWorkspaceSlug
      ? routerWorkspaceSlug.toString()
      : undefined;
    const projectId = routerProjectId ? routerProjectId.toString() : undefined;
    // hooks
    const { issuesFilter } = useIssues(EIssuesStoreType.ARCHIVED);
    // derived values
    const workItemFilters = projectId
      ? issuesFilter?.getIssueFilters(projectId)
      : undefined;

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

    if (!workspaceSlug || !projectId || !workItemFilters) return <></>;
    return (
      <IssuesStoreContext.Provider value={EIssuesStoreType.ARCHIVED}>
        <ProjectLevelWorkItemFiltersHOC
          entityType={EIssuesStoreType.ARCHIVED}
          entityId={projectId?.toString()}
          filtersToShowByLayout={
            ISSUE_DISPLAY_FILTERS_BY_PAGE.archived_issues.filters
          }
          initialWorkItemFilters={workItemFilters}
          updateFilters={issuesFilter?.updateFilterExpression.bind(
            issuesFilter,
            workspaceSlug,
            projectId,
          )}
          projectId={projectId}
          workspaceSlug={workspaceSlug}
        >
          {({ filter: archivedWorkItemsFilter }) => (
            <>
              {archivedWorkItemsFilter && (
                <WorkItemFiltersRow filter={archivedWorkItemsFilter} />
              )}
              <div className="relative h-full w-full overflow-auto">
                <ArchivedIssueListLayout />
              </div>
              <IssuePeekOverview />
            </>
          )}
        </ProjectLevelWorkItemFiltersHOC>
      </IssuesStoreContext.Provider>
    );
  },
);