"use client";
import { useUIState } from "src/useUIState";
import { Footer } from "components/ActionBar/Footer";
import { Media } from "components/Media";
import { ThemePopover } from "components/ThemeManager/ThemeSetter";
import { Toolbar } from "components/Toolbar";
import { FootnoteToolbar } from "components/Toolbar/FootnoteToolbarWrapper";
import { ShareOptions } from "app/[leaflet_id]/actions/ShareOptions";
import {
  AddToHomeButton,
  HomeButton,
} from "app/[leaflet_id]/actions/HomeButton";
import { PublishButton } from "./actions/PublishButton";
import { useEntitySetContext } from "components/EntitySetProvider";
import { Watermark } from "components/Watermark";
import { BackToPubButton } from "./actions/BackToPubButton";
import { useLeafletPublicationData } from "components/PageSWRDataProvider";
import { useIdentityData } from "components/IdentityProvider";
import { useEntity, useReplicache } from "src/replicache";
import { block } from "sharp";
import { PostSettings } from "components/PostSettings";
import useSWR from "swr";
import { getHomeDocs } from "app/(home-pages)/(writer)/home/storage";

export function hasBlockToolbar(blockType: string | null | undefined) {
  return (
    blockType === "text" ||
    blockType === "heading" ||
    blockType === "blockquote" ||
    blockType === "button" ||
    blockType === "datetime" ||
    blockType === "image"
  );
}
export function LeafletFooter(props: { entityID: string }) {
  let focusedBlock = useUIState((s) => s.focusedEntity);
  let entity_set = useEntitySetContext();
  let { identity } = useIdentityData();
  let { permission_token } = useReplicache();
  let { data: pub } = useLeafletPublicationData();
  let { data: localLeaflets } = useSWR("leaflets", () => getHomeDocs(), {
    fallbackData: [],
  });
  let blockType = useEntity(focusedBlock?.entityID || null, "block/type")?.data
    .value;
  let isOnHome = identity
    ? !!identity.permission_token_on_homepage.find(
        (pth) => pth.permission_tokens.id === permission_token.id,
      )
    : !!localLeaflets.find((f) => f.token.id === permission_token.id);

  return (
    <Media
      mobile
      className="mobileLeafletFooter w-full z-10 touch-none -mt-[54px] "
    >
      {focusedBlock &&
      focusedBlock.entityType == "block" &&
      hasBlockToolbar(blockType) &&
      entity_set.permissions.write ? (
        <div
          className="w-full z-10 p-2 flex bg-bg-page pwa-padding-bottom"
          onMouseDown={(e) => {
            if (e.currentTarget === e.target) e.preventDefault();
          }}
        >
          <Toolbar
            pageID={focusedBlock.parent}
            blockID={focusedBlock.entityID}
            blockType={blockType}
          />
        </div>
      ) : focusedBlock &&
        focusedBlock.entityType === "footnote" &&
        entity_set.permissions.write ? (
        <div
          className="w-full z-10 p-2 flex bg-bg-page pwa-padding-bottom"
          onMouseDown={(e) => {
            if (e.currentTarget === e.target) e.preventDefault();
          }}
        >
          <FootnoteToolbar pageID={focusedBlock.parent} />
        </div>
      ) : entity_set.permissions.write ? (
        <Footer>
          {pub?.publications &&
          identity?.atp_did &&
          pub.publications.identity_did === identity.atp_did ? (
            <BackToPubButton publication={pub.publications} />
          ) : (
            <HomeButton />
          )}

          <div className="mobileLeafletActions flex gap-2 shrink-0">
            {!isOnHome ? (
              <AddToHomeButton primary />
            ) : (
              <PublishButton entityID={props.entityID} />
            )}

            <ShareOptions />
            <PostSettings />
            <ThemePopover entityID={props.entityID} />
          </div>
        </Footer>
      ) : (
        <div className="pb-2 px-2 z-10 flex justify-end">
          <Watermark mobile />
        </div>
      )}
    </Media>
  );
}
