ui-landing-page 6.1.0

package/src/components/LandingPage/common/ui-kit/organisms/BookSection/BookSection.tsx

@@ -0,0 +1,630 @@
+import SectionFullScreen from "../../../SectionFullScreen";
+import { BaseSectionProps } from "../../../../models/base-section";
+import { Media } from "../../../../models/general";
+import { FC, useEffect, useState } from "react";
+import { parse } from "@phygitallabs/helpers";
+import draftToHtml from "draftjs-to-html";
+import { debounce } from 'lodash-es';
+import clsx from "clsx";
+// import ModalContinueReading from "@/components/pages/UI/Sections/BookSection/ModalContinueReading";
+import {
+  Chapter,
+  useFirstPageContext,
+  useMenuContext,
+} from "../../../../hooks/useBookMenuContext";
+import { scrollToPage, serializeDocumentFragment } from "./utils";
+// import { useRouter } from "next/router";
+// import { useProductStory } from "@/hooks/useProductStory";
+import { twMerge } from "tailwind-merge";
+import { useFullScreenContext } from "../../../../hooks/useFullScreenContext";
+import { Field, ThemeConfig } from "../../types/base";
+import TitleCustom from "../../moleculars/Title";
+import { Typography } from "../../atomics";
+import BackgroundImage from "../../moleculars/BackgroundImage";
+import { ImageNomion as Image } from '@phygitallabs/core-ui/components/image-nomion';
+
+interface Cover {
+  title: string;
+  author: string;
+  image: Media;
+  caption: string;
+}
+
+export interface Content {
+  title: string;
+  image: Media;
+  caption: string;
+  content: string;
+}
+
+interface ContentDom extends Content {
+  contentInDom: HTMLElement[];
+}
+
+interface BookSectionData {
+  cover: Field;
+  content: Field;
+}
+
+interface Page {
+  id: string;
+  chapterTitle?: string;
+  kind: "cover" | "chapter" | "menu" | "content";
+  content: string | string[] | Cover | React.ReactElement;
+}
+
+const CURRENT_PAGE_KEY = "currentPageV2";
+
+export interface BookSectionProps extends BaseSectionProps {
+  firstPageIndex: number;
+}
+
+const renderIntroChapter = (content: Content, configTheme: ThemeConfig) => {
+  const renderedContent = (
+    <div
+      className={clsx(
+        "flex h-full flex-col items-center justify-between gap-2",
+        !content?.image?.url && "!justify-center"
+      )}
+    >
+      <TitleCustom
+        field={{ value: parse(content.title) } as any}
+        configTheme={configTheme}
+        className="text-center"
+      />
+
+      {content?.image?.url && (
+        <>
+          <div className="relative flex h-full w-full flex-col items-center justify-center bg-cover">
+            <BackgroundImage
+              field={
+                {
+                  value: {
+                    image: content?.image,
+                    is_overlay: true,
+                  },
+                } as any
+              }
+            />
+            {content.image?.url && (
+              <Image
+                className="z-50 max-h-[70svh] w-full object-contain grayscale"
+                src={content.image?.url}
+                alt=""
+                width={"auto"}
+                height={"auto"}
+              />
+            )}
+          </div>
+          {content?.caption && (
+            <Typography variant="span" className="italic p-2">
+              {content?.caption}
+            </Typography>
+          )}
+        </>
+      )}
+    </div>
+  );
+  return renderedContent;
+};
+
+const makeImageContent = (dom: HTMLImageElement) => {
+  let alt = dom?.alt === "undefined" ? "" : dom.alt;
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center overflow-hidden bg-[transparent]">
+      <div className="relative flex h-full w-full flex-col justify-center">
+        <div className="relative inset-0 flex h-full w-full flex-col items-center justify-center backdrop-blur">
+          <Image
+            src={dom?.src}
+            alt="Culture"
+            className="max-h-[400px] w-full object-contain"
+            width={"auto"}
+            height={"auto"}
+          />
+          {alt && (
+            <div className=" inset-0 flex w-full items-end bg-[transparent]">
+              <div className="flex w-full flex-col items-center justify-center overflow-y-hidden bg-white-alpha-.1 p-2 backdrop-blur-md">
+                <p className="text-sm font-light">{alt}</p>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const convertObjectToHtml = (content: Content[]) => {
+  return content.map(({ content, ...rest }: any) => {
+    const dom = new DOMParser().parseFromString(
+      draftToHtml(JSON.parse(content)),
+      "text/html"
+    );
+    const domArr = Array.from(dom.querySelector("body")!.childNodes);
+    const domArrWithoutTextNode = domArr.filter((node) => {
+      return node.nodeName !== "#text";
+    });
+    return {
+      contentInDom: domArrWithoutTextNode,
+      ...rest,
+    } as ContentDom;
+  });
+};
+
+const BookSection: FC<BookSectionProps> = ({
+  sectionData,
+  id,
+  configTheme,
+  firstPageIndex,
+}) => {
+  const { content, cover } = { ...sectionData } as BookSectionData;
+  const { firstPage, setFirstPage } = useFirstPageContext()!;
+  const { isInViewport } = useFullScreenContext(id);
+
+  const [pages, setPages] = useState<Page[]>([
+    {
+      id: "cover",
+      kind: "cover",
+      content: cover?.value,
+    },
+    {
+      id: "menu",
+      kind: "menu",
+      content: content?.value?.map(({ title }: { title: string }) => title),
+    },
+  ]);
+  const [pageNumber, setPageNumber] = useState(-1);
+  // const [isModalOpen, setIsModalOpen] = useState(false);
+  // const [previousPage, setPreviousPage] = useState<number | null>(null);
+  const { menu, setMenu } = useMenuContext()!;
+  const container = document.getElementById("container")!;
+
+  // const toggleModal = () => setIsModalOpen((pre) => !pre);
+
+  // const handleOpenModalContinueModal = () => {
+  // const previousPageData = localStorage.getItem(CURRENT_PAGE_KEY);
+  // if (previousPageData === null) return;
+  // const previousPageObject = JSON.parse(previousPageData);
+  // const previousPage = previousPageObject[itemId];
+  // if (previousPage === undefined || previousPage < 1) return;
+  // setPreviousPage(previousPage);
+  // if (itemInfo?.extra_info?.owner_name || itemInfo?.extra_info?.context)
+  //   setIsModalOpen(true);
+  // else setIsModalOpen(false);
+  // };
+
+  const handlePagination = () => {
+    let sections: Page[] = [];
+    const LINE_HEIGHT = 28;
+    const PADDING_X = 20 * 2;
+    const PADDING_LIST_PARAGRAPH_X = 20 * 2;
+    const container = document.getElementById("container")!;
+    const formattedContent = convertObjectToHtml(content?.value);
+    const baseContainerWidth = container.offsetWidth - PADDING_X;
+    const containerHeight = container.offsetHeight;
+    const maxLinePerPage = Math.floor(containerHeight / LINE_HEIGHT);
+
+    let pageContent = "";
+    let currentLine = "";
+    let currentPage = 0;
+    let currentLineNumber = 0;
+    let isFirstLineListPara = false;
+
+    //CANVAS
+    const canvas = document.getElementById("canvas") as HTMLCanvasElement;
+    const ctx = canvas.getContext("2d")!;
+    const style = window.getComputedStyle(container);
+    const { fontSize, fontWeight, fontStyle, fontFamily } = style;
+    ctx.font = `${fontStyle} ${fontWeight} ${fontSize} ${fontFamily}`;
+
+    const resetnewPage = () => {
+      pageContent = "";
+      currentLineNumber = 0;
+      currentPage++;
+    };
+
+    const handlePushPageAndReset = (chapterTitle: string) => {
+      const htmlDom = new DOMParser().parseFromString(pageContent, "text/html");
+      const parentNode = htmlDom.querySelector("body")!;
+      const domArr = Array.from(parentNode.childNodes) as HTMLDivElement[];
+      const isBlankPage = domArr.every(
+        (dom) => dom.firstElementChild?.nodeName === "BR"
+      );
+      if (isBlankPage) return;
+
+      let counter = 0;
+      const removeFirstBrsInPage = (parent: HTMLBodyElement) => {
+        const childNodes = Array.from(parent.childNodes) as HTMLDivElement[];
+        for (let i = 0; i < childNodes.length; i++) {
+          const childNode = childNodes[i];
+          if (
+            childNode.firstElementChild?.nodeName === "BR" &&
+            !childNode.innerText?.trim()
+          ) {
+            parentNode.removeChild(childNodes[i]);
+            counter++;
+          } else return;
+        }
+      };
+      removeFirstBrsInPage(parentNode as any);
+      currentLineNumber -= counter;
+      const content = (
+        <div>{parse(serializeDocumentFragment(parentNode as any))}</div>
+      );
+      sections.push({
+        id: "chapter",
+        chapterTitle,
+        kind: "content",
+        content,
+      });
+      resetnewPage();
+    };
+
+    const addNewLineToPageContent = ({
+      hasSpacing,
+      isListParagraph,
+      isLastLineInParagraph,
+    }: {
+      hasSpacing: boolean;
+      isListParagraph: boolean;
+      isLastLineInParagraph: boolean;
+    }) => {
+      if (!currentLine.length) return;
+      let className = twMerge(
+        !isLastLineInParagraph && "text-last-justify",
+        isListParagraph && "px-5",
+        isListParagraph &&
+        isFirstLineListPara &&
+        `relative before:content-['●'] before:absolute before:left-0`
+      );
+      isFirstLineListPara = false;
+      pageContent += `<div className="${className}">
+          ${currentLine}${hasSpacing ? " " : ""}
+        </div>`;
+      currentLineNumber++;
+    };
+    const handleParagraphNode = ({
+      dom,
+      isLastDomParagraph,
+      chapterTitle,
+      isListParagraph,
+    }: {
+      dom: HTMLElement;
+      isLastDomParagraph: boolean;
+      chapterTitle: string;
+      isListParagraph: boolean;
+    }) => {
+      let containerWidth = baseContainerWidth;
+      isFirstLineListPara = false;
+      if (isListParagraph) {
+        containerWidth = baseContainerWidth - PADDING_LIST_PARAGRAPH_X;
+        isFirstLineListPara = true;
+      }
+      const isNextNodeImg = dom.nextElementSibling?.nodeName === "IMG";
+      const content = dom.innerText.trim();
+      const handleSplitIntoPages = (words: string[]) => {
+        for (let j = 0; j < words.length; j++) {
+          const isLastWord = () => j === words.length - 1;
+          const word = words[j];
+          const separator = j === 0 ? "" : " ";
+
+          const currentLineStillHasSpace =
+            ctx.measureText(`${currentLine}${separator}${word}`).width <
+            containerWidth;
+
+          if (currentLineStillHasSpace) {
+            currentLine += `${separator}${word}`;
+            if (isLastWord() && (isLastDomParagraph || isNextNodeImg)) {
+              addNewLineToPageContent({
+                hasSpacing: false,
+                isListParagraph,
+                isLastLineInParagraph: true,
+              });
+              handlePushPageAndReset(chapterTitle);
+              currentLine = "";
+            }
+          } else {
+            addNewLineToPageContent({
+              hasSpacing: true,
+              isListParagraph,
+              isLastLineInParagraph: false,
+            });
+            currentLine = `${word}`;
+            if (isLastWord() && (isLastDomParagraph || isNextNodeImg)) {
+              addNewLineToPageContent({
+                hasSpacing: false,
+                isListParagraph,
+                isLastLineInParagraph: true,
+              });
+              handlePushPageAndReset(chapterTitle);
+              currentLine = "";
+            } else {
+              const isLastLine = currentLineNumber === maxLinePerPage;
+              // Check recursive case
+              if (isLastLine && !(isLastWord() || isNextNodeImg)) {
+                handlePushPageAndReset(chapterTitle);
+                currentLine = "";
+                handleSplitIntoPages(words.slice(j));
+                return;
+              } else {
+                // Do nothing
+                if (!isLastLine && isNextNodeImg) {
+                } else if (
+                  !isLastLine &&
+                  !(isLastWord() && isLastDomParagraph)
+                ) {
+                } else handlePushPageAndReset(chapterTitle);
+              }
+            }
+          }
+        }
+      };
+      handleSplitIntoPages(content.split(" "));
+    };
+
+    const handleBreakParagraph = (
+      chapterTitle: string,
+      isListParagraph: boolean
+    ) => {
+      currentLine += "<br/>";
+      addNewLineToPageContent({
+        hasSpacing: false,
+        isListParagraph,
+        isLastLineInParagraph: true,
+      });
+      if (currentLineNumber === maxLinePerPage) {
+        handlePushPageAndReset(chapterTitle);
+        resetnewPage();
+      }
+      currentLine = "";
+    };
+
+    const handleImageNode = (dom: HTMLElement, chapterTitle: string) => {
+      sections.push({
+        id: "chapter",
+        chapterTitle: chapterTitle,
+        kind: "content",
+        content: makeImageContent(dom as HTMLImageElement),
+      });
+    };
+
+    for (let i = 0; i < formattedContent.length; i++) {
+      const chapterContent = formattedContent[i];
+      const chapterTitle = chapterContent.title;
+      sections.push({
+        id: `chapter-${i + 1}`,
+        kind: "chapter",
+        content: renderIntroChapter(chapterContent, configTheme as ThemeConfig),
+        chapterTitle,
+      });
+
+      const { contentInDom } = chapterContent;
+
+      const traverseDom = (htmlElements: HTMLElement[]) => {
+        let lastPIndex;
+        for (let k = htmlElements.length - 1; k >= 0; k--) {
+          const dom = htmlElements[k];
+          if (dom.nodeName === "P") {
+            lastPIndex = k;
+            break;
+          }
+        }
+        for (let j = 0; j < htmlElements.length; j++) {
+          const dom = htmlElements[j];
+          switch (dom.nodeName) {
+            case "UL":
+              traverseDom(Array.from(dom.children) as HTMLElement[]);
+              break;
+            case "LI":
+            case "P":
+              const isListParagraph = dom.nodeName === "LI";
+              const isLastDomParagraph = lastPIndex === j;
+              handleParagraphNode({
+                dom,
+                isLastDomParagraph,
+                chapterTitle,
+                isListParagraph,
+              });
+              handleBreakParagraph(chapterTitle, isListParagraph);
+              break;
+            case "IMG":
+              handleImageNode(dom, chapterTitle);
+              break;
+            default:
+              break;
+          }
+        }
+      };
+      traverseDom(contentInDom);
+    }
+    const defaultSection: Page[] = [
+      {
+        id: "cover",
+        kind: "cover",
+        content: cover?.value,
+      },
+      {
+        id: "menu",
+        kind: "menu",
+        content: content?.value?.map(({ title }: { title: string }) => title),
+      },
+    ];
+    setPages([...defaultSection, ...sections]);
+  };
+
+  const handlePageScroll = (container: HTMLElement) => {
+    let currentPageNumber =
+      Math.ceil(container.scrollTop / container.offsetHeight) - 3;
+    if (currentPageNumber <= pages.length) {
+      setPageNumber(currentPageNumber);
+    }
+    const lastPageData = localStorage.getItem(CURRENT_PAGE_KEY);
+    let pageObject: { [key: string]: number } = {};
+    if (!!lastPageData) pageObject = JSON.parse(lastPageData);
+    // pageObject[itemId] = currentPageNumber;
+    localStorage.setItem(CURRENT_PAGE_KEY, JSON.stringify(pageObject));
+  };
+  const debounceScroll = (container: HTMLElement) => {
+    return debounce(() => handlePageScroll(container), 20);
+  };
+
+  useEffect(() => {
+    const handlePaginationTimeOut = () =>
+      setTimeout(() => handlePagination(), 1000);
+    if (!content?.value || !container) return;
+    setFirstPage(firstPageIndex);
+    handlePaginationTimeOut();
+    const debouncedHandleResize = debounce(handlePaginationTimeOut, 200);
+    window.addEventListener("resize", debouncedHandleResize);
+    return () => window.removeEventListener("resize", debouncedHandleResize);
+  }, [content?.value, container]);
+
+  useEffect(() => {
+    const container = document.getElementById("snap-container")!;
+    container.addEventListener("scroll", debounceScroll(container));
+
+    return () => {
+      container.removeEventListener("scroll", debounceScroll(container));
+    };
+  }, [pages]);
+
+  useEffect(() => {
+    const chapterMenu = pages
+      ?.map((page, index) => {
+        return {
+          id: page.id,
+          kind: page.kind,
+          chapterTitle: page.chapterTitle,
+          pageNumber: index,
+        };
+      })
+      .filter((page) => page.kind === "chapter")
+      .map((page) => {
+        return {
+          id: page.id,
+          chapterTitle: parse(page.chapterTitle || ""),
+          pageNumber: page.pageNumber,
+        };
+      });
+    setMenu(chapterMenu as Chapter[]);
+  }, [pages, firstPage]);
+
+  const renderByPageKind = (page: Page) => {
+    switch (page.kind) {
+      case "cover":
+        const cover = page.content as Cover;
+        return (
+          <div
+            id="cover"
+            className="flex h-full flex-col items-center justify-start"
+          >
+            <div>
+              <TitleCustom
+                field={{ value: cover?.title }}
+                configTheme={configTheme}
+                className="whitespace-normal text-center text-2xl"
+              />
+              <Typography variant="h6" className="text-center">
+                {cover?.author}
+              </Typography>
+            </div>
+            <div className="flex h-1/2 flex-col items-center">
+              {cover?.image?.url && (
+                <Image
+                  className="h-full object-contain"
+                  src={cover?.image?.url}
+                  alt=""
+                />
+              )}
+              <p className="w-full bg-white-alpha-.1 p-2 text-center italic">
+                {cover?.caption}
+              </p>
+            </div>
+          </div>
+        );
+      case "menu":
+        return (
+          <div id="menu" className="h-full space-y-8">
+            <TitleCustom
+              field={{ value: "Mục lục" }}
+              configTheme={configTheme}
+              className="text-center"
+            />
+            <div className="h-5/6 space-y-5 overflow-scroll text-center text-lg">
+              {menu &&
+                menu?.map((item) => (
+                  <p
+                    key={item.id}
+                    onClick={() => scrollToPage(item.pageNumber, 2)}
+                  >
+                    {item.chapterTitle}
+                  </p>
+                ))}
+            </div>
+          </div>
+        );
+      case "chapter":
+        return (
+          <div id={page.id} className="h-full text-justify">
+            {page.content as React.ReactElement}
+          </div>
+        );
+      case "content":
+        return (
+          <div className="h-full text-justify">
+            {page.content as React.ReactElement}
+          </div>
+        );
+      default:
+        return null;
+    }
+  };
+  return (
+    // <div className="relative h-full m-auto font-stix">
+    <>
+      {/* <ModalContinueReading
+        pageNumber={previousPage!}
+        isModalOpen={isModalOpen}
+        toggleModal={toggleModal}
+        otherSectionNumber={firstPage}
+      /> */}
+      {pages.map((page, index) => {
+        // const isChapterTitleRendered =
+        //   page.chapterTitle && page.kind !== "chapter";
+        return (
+          <>
+            <SectionFullScreen key={index} name={id}>
+              <div className="h-full pt-[50px]">
+                {/* {isChapterTitleRendered && (
+                  <div className="px-6 py-3 text-center text-base font-bold uppercase leading-5">
+                    {page.chapterTitle}
+                  </div>
+                )} */}
+                <div
+                  id="container"
+                  className="flex h-full w-full flex-col px-5 text-base font-light leading-7"
+                  style={{
+                    fontFamily: configTheme?.font_family,
+                    color: configTheme?.secondary_color,
+                  }}
+                >
+                  {renderByPageKind(page)}
+                </div>
+              </div>
+              <canvas className="invisible" id="canvas" />
+            </SectionFullScreen>
+          </>
+        );
+      })}
+      <div
+        className={clsx(
+          "fixed bottom-2 left-1/2 z-50 flex w-fit -translate-x-1/2 rounded-lg bg-black p-2 text-white",
+          (pageNumber <= 0 || !isInViewport) && "hidden"
+        )}
+      >
+        {pageNumber}/{pages.length}
+      </div>
+    </>
+  );
+};
+export default BookSection;