import { Logo } from "@buzzwaretech/propel/emoji-icon-picker";
import { PageIcon } from "@buzzwaretech/propel/icons";
import { observer } from "mobx-react";
import { useRef } from "react";
// buzzwareTech imports
import { getPageName } from "@buzzwaretech/utils";
// components
import { ListItem } from "@/components/core/list";
import { BlockItemAction } from "@/components/pages/list/block-item-action";
// hooks
import { usePlatformOS } from "@/hooks/use-platform-os";
// buzzwareTech web hooks
import type { EPageStoreType } from "@/buzzwareTech-web/hooks/store";
import { usePage } from "@/buzzwareTech-web/hooks/store";

type TPageListBlock = {
  pageId: string;
  storeType: EPageStoreType;
};

export const PageListBlock = observer(function PageListBlock(
  props: TPageListBlock,
) {
  const { pageId, storeType } = props;
  // refs
  const parentRef = useRef(null);
  // hooks
  const page = usePage({
    pageId,
    storeType,
  });
  const { isMobile } = usePlatformOS();
  // handle page check
  if (!page) return null;
  // derived values
  const { name, logo_props, getRedirectionLink } = page;

  return (
    <ListItem
      prependTitleElement={
        <>
          {logo_props?.in_use ? (
            <Logo logo={logo_props} size={16} type="lucide" />
          ) : (
            <PageIcon className="h-4 w-4 text-tertiary" />
          )}
        </>
      }
      title={getPageName(name)}
      itemLink={getRedirectionLink()}
      actionableItems={
        <BlockItemAction
          page={page}
          parentRef={parentRef}
          storeType={storeType}
        />
      }
      isMobile={isMobile}
      parentRef={parentRef}
    />
  );
});