import { observer } from "mobx-react";
import Image from "next/image";
// types
import { TPageNavigationTabs } from "@plane/types";
// components
import { EmptyState } from "@/components/empty-state";
import { PageLoader } from "@/components/pages";
// constants
import { EmptyStateType } from "@/constants/empty-state";
// hooks
import { useProjectPages } from "@/hooks/store";
// assets
import AllFiltersImage from "public/empty-state/pages/all-filters.svg";
import NameFilterImage from "public/empty-state/pages/name-filter.svg";

type Props = {
  children: React.ReactNode;
  pageType: TPageNavigationTabs;
  projectId: string;
};

export const PagesListMainContent: React.FC<Props> = observer((props) => {
  const { children, pageType, projectId } = props;
  // store hooks
  const { loader, filteredPageIds, pageIds, filters } = useProjectPages(projectId);

  if (loader === "init-loader") return <PageLoader />;
  // if no pages exist in the active page type
  if (pageIds?.length === 0) {
    if (pageType === "public") return <EmptyState type={EmptyStateType.PROJECT_PAGE_PUBLIC} />;
    if (pageType === "private") return <EmptyState type={EmptyStateType.PROJECT_PAGE_PRIVATE} />;
    if (pageType === "archived") return <EmptyState type={EmptyStateType.PROJECT_PAGE_ARCHIVED} />;
  }
  // if no pages match the filter criteria
  if (filteredPageIds?.length === 0)
    return (
      <div className="h-full w-full grid place-items-center">
        <div className="text-center">
          <Image
            src={filters.searchQuery.length > 0 ? NameFilterImage : AllFiltersImage}
            className="h-36 sm:h-48 w-36 sm:w-48 mx-auto"
            alt="No matching modules"
          />
          <h5 className="text-xl font-medium mt-7 mb-1">No matching pages</h5>
          <p className="text-custom-text-400 text-base">
            {filters.searchQuery.length > 0
              ? "Remove the search criteria to see all pages"
              : "Remove the filters to see all pages"}
          </p>
        </div>
      </div>
    );

  return <div className="h-full w-full overflow-hidden">{children}</div>;
});