import { Fragment, jsx } from "react/jsx-runtime";
import { cx } from "@emotion/css";
import { forwardRef } from "react";
import { Slate, richTextDTOtoDAO } from "@makeswift/controls";
import { useResponsiveStyle } from "../../../../components/utils/responsive-style";
import { InlineType, BlockType } from "../../../../slate/types";
import { useStyle } from "../../use-style";
import useEnhancedTypography, { useTypographyClassName } from "../typography";
import { Link } from "../../../../components/shared/Link";
const ReadOnlyText = forwardRef(function ReadOnlyText2({ id, text, width, margin }, ref) {
  const descendants = text == null ? [] : richTextDTOtoDAO(text);
  const descendantsAsString = getText(descendants);
  return /* @__PURE__ */ jsx(
    "div",
    {
      ref,
      id,
      style: {
        /**
         * These are the default styles that Slate uses for its editable div.
         * https://github.com/ianstormtaylor/slate/blob/4bd15ed3950e3a0871f5d0ecb391bb637c05e59d/packages/slate-react/src/components/editable.tsx
         * Search for `disableDefaultStyles`
         */
        position: "relative",
        whiteSpace: "pre-wrap",
        wordWrap: "break-word"
      },
      className: cx(width, margin),
      children: descendantsAsString === "" ? /* @__PURE__ */ jsx(Placeholder, {}) : /* @__PURE__ */ jsx(Descendants, { descendants })
    }
  );
});
var ReadOnlyText_default = ReadOnlyText;
function Placeholder({ text = "Write some text..." }) {
  return /* @__PURE__ */ jsx(
    "span",
    {
      className: useStyle({
        display: "inline-block",
        width: 0,
        maxWidth: "100%",
        whiteSpace: "nowrap",
        opacity: 0.333,
        verticalAlign: "text-top"
      }),
      children: text
    }
  );
}
function TextElement({ descendant }) {
  const enhancedTypography = useEnhancedTypography(descendant.typography);
  const typographyClassName = useTypographyClassName(enhancedTypography);
  return /* @__PURE__ */ jsx("span", { className: typographyClassName, children: descendant.text === "" ? "\uFEFF" : descendant.text });
}
function InlineElement({ descendant }) {
  const linkClassName = useStyle({ textDecoration: "none" });
  switch (descendant.type) {
    case InlineType.Code:
      return /* @__PURE__ */ jsx("code", { children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
    case InlineType.SuperScript:
      return /* @__PURE__ */ jsx("sup", { children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
    case InlineType.SubScript:
      return /* @__PURE__ */ jsx("sub", { children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
    case InlineType.Link:
      return /* @__PURE__ */ jsx(Link, { className: linkClassName, link: descendant.link ?? void 0, children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
  }
}
function BlockElement({ descendant }) {
  const blockStyles = [
    useStyle({ margin: 0 }),
    useStyle(useResponsiveStyle([descendant.textAlign], ([textAlign = "left"]) => ({ textAlign })))
  ];
  const quoteStyle = useStyle({
    padding: "0.5em 10px",
    fontSize: "1.25em",
    fontWeight: "300",
    borderLeft: "5px solid rgba(0, 0, 0, 0.1)"
  });
  switch (descendant.type) {
    case BlockType.Default:
    case BlockType.Paragraph:
      return /* @__PURE__ */ jsx("p", { className: cx(...blockStyles), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
    case BlockType.Heading1:
      return /* @__PURE__ */ jsx("h1", { className: cx(...blockStyles), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
    case BlockType.Heading2:
      return /* @__PURE__ */ jsx("h2", { className: cx(...blockStyles), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
    case BlockType.Heading3:
      return /* @__PURE__ */ jsx("h3", { className: cx(...blockStyles), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
    case BlockType.Heading4:
      return /* @__PURE__ */ jsx("h4", { className: cx(...blockStyles), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
    case BlockType.Heading5:
      return /* @__PURE__ */ jsx("h5", { className: cx(...blockStyles), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
    case BlockType.Heading6:
      return /* @__PURE__ */ jsx("h6", { className: cx(...blockStyles), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
    case BlockType.BlockQuote:
      return /* @__PURE__ */ jsx("blockquote", { className: cx(...blockStyles, quoteStyle), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
    case BlockType.OrderedList:
      return /* @__PURE__ */ jsx("ol", { className: cx(...blockStyles), style: { listStylePosition: "inside" }, children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
    case BlockType.UnorderedList:
      return /* @__PURE__ */ jsx("ul", { className: cx(...blockStyles), style: { listStylePosition: "inside" }, children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
    case BlockType.ListItem:
      return /* @__PURE__ */ jsx("li", { className: cx(...blockStyles), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
    case BlockType.ListItemChild:
      return /* @__PURE__ */ jsx("span", { className: cx(...blockStyles), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
    default:
      return null;
  }
}
function Descendants({ descendants }) {
  return /* @__PURE__ */ jsx(Fragment, { children: descendants.map((descendant, index) => {
    if (Slate.isText(descendant)) {
      return /* @__PURE__ */ jsx(TextElement, { descendant }, index);
    }
    switch (descendant.type) {
      case InlineType.Link:
      case InlineType.Code:
      case InlineType.SubScript:
      case InlineType.SuperScript:
        return /* @__PURE__ */ jsx(InlineElement, { descendant }, index);
      case BlockType.Heading1:
      case BlockType.Heading2:
      case BlockType.Heading3:
      case BlockType.Heading4:
      case BlockType.Heading5:
      case BlockType.Heading6:
      case BlockType.BlockQuote:
      case BlockType.Paragraph:
      case BlockType.Default:
      case BlockType.OrderedList:
      case BlockType.UnorderedList:
      case BlockType.ListItem:
      case BlockType.ListItemChild:
        return /* @__PURE__ */ jsx(BlockElement, { descendant }, index);
      default:
        return null;
    }
  }) });
}
function isBlock(descendant) {
  if ("text" in descendant)
    return false;
  switch (descendant.type) {
    case BlockType.Heading1:
    case BlockType.Heading2:
    case BlockType.Heading3:
    case BlockType.Heading4:
    case BlockType.Heading5:
    case BlockType.Heading6:
    case BlockType.BlockQuote:
    case BlockType.Paragraph:
    case BlockType.Default:
    case BlockType.OrderedList:
    case BlockType.UnorderedList:
    case BlockType.ListItem:
    case BlockType.ListItemChild:
      return true;
    default:
      return false;
  }
}
function getTextByDescendant(descendant) {
  if ("text" in descendant) {
    return descendant.text ?? "";
  }
  switch (descendant.type) {
    case InlineType.Link:
    case InlineType.Code:
    case InlineType.SubScript:
    case InlineType.SuperScript:
      return descendant.children.map((descendant2) => getTextByDescendant(descendant2)).join("") ?? "";
    case BlockType.Heading1:
    case BlockType.Heading2:
    case BlockType.Heading3:
    case BlockType.Heading4:
    case BlockType.Heading5:
    case BlockType.Heading6:
    case BlockType.BlockQuote:
    case BlockType.Paragraph:
    case BlockType.Default:
    case BlockType.OrderedList:
    case BlockType.UnorderedList:
    case BlockType.ListItem:
    case BlockType.ListItemChild:
      return descendant.children.map((descendant2) => getTextByDescendant(descendant2)).join(descendant.children.every(isBlock) ? "\n" : "") ?? "";
    default:
      return "";
  }
}
function getText(descendant) {
  return descendant.map(getTextByDescendant).join("\n");
}
export {
  BlockElement,
  TextElement,
  ReadOnlyText_default as default
};
//# sourceMappingURL=ReadOnlyText.js.map