"use strict";
var import_Markdown = require("../../Markdown.css");
const jsxRuntime = require("react/jsx-runtime");
const MarkdownViewer = require("markdown-to-jsx");
const React = require("react");
const kit_internal_useResize = require("./useResize.cjs");
const kit_Pivot = require("../Pivot.cjs");
const kit_Spinner = require("../Spinner.cjs");
const _interopNamespaceDefaultOnly = (e) => Object.freeze(Object.defineProperty({ __proto__: null, default: e }, Symbol.toStringTag, { value: "Module" }));
const base = "Markdown_base_0831b";
const noOverflow = "Markdown_noOverflow_0831b";
const anchor = "Markdown_anchor_0831b";
const border = "Markdown_border_0831b";
const f6 = "Markdown_f6_0831b";
const highlight = "Markdown_highlight_0831b";
const active = "Markdown_active_0831b";
const render = "Markdown_render_0831b";
const placeholder = "Markdown_placeholder_0831b";
const css = {
  base,
  noOverflow,
  anchor,
  "radio-label": "Markdown_radio-label_0831b",
  border,
  "border-0": "Markdown_border-0_0831b",
  "border-bottom": "Markdown_border-bottom_0831b",
  "rounded-1": "Markdown_rounded-1_0831b",
  "bg-white": "Markdown_bg-white_0831b",
  "bg-gray-light": "Markdown_bg-gray-light_0831b",
  "text-gray-light": "Markdown_text-gray-light_0831b",
  "mb-0": "Markdown_mb-0_0831b",
  "my-2": "Markdown_my-2_0831b",
  "pl-0": "Markdown_pl-0_0831b",
  "py-0": "Markdown_py-0_0831b",
  "pl-1": "Markdown_pl-1_0831b",
  "pl-2": "Markdown_pl-2_0831b",
  "py-2": "Markdown_py-2_0831b",
  "px-3": "Markdown_px-3_0831b",
  "pl-4": "Markdown_pl-4_0831b",
  "pl-5": "Markdown_pl-5_0831b",
  "pl-6": "Markdown_pl-6_0831b",
  f6,
  "lh-condensed": "Markdown_lh-condensed_0831b",
  "text-bold": "Markdown_text-bold_0831b",
  "pl-c": "Markdown_pl-c_0831b",
  "pl-ent": "Markdown_pl-ent_0831b",
  "pl-k": "Markdown_pl-k_0831b",
  "pl-bu": "Markdown_pl-bu_0831b",
  "pl-ii": "Markdown_pl-ii_0831b",
  "pl-c2": "Markdown_pl-c2_0831b",
  "pl-sr": "Markdown_pl-sr_0831b",
  "pl-cce": "Markdown_pl-cce_0831b",
  "pl-sra": "Markdown_pl-sra_0831b",
  "pl-sre": "Markdown_pl-sre_0831b",
  "pl-ml": "Markdown_pl-ml_0831b",
  "pl-mi": "Markdown_pl-mi_0831b",
  "pl-mb": "Markdown_pl-mb_0831b",
  "pl-md": "Markdown_pl-md_0831b",
  "pl-mi1": "Markdown_pl-mi1_0831b",
  "pl-mc": "Markdown_pl-mc_0831b",
  "pl-mi2": "Markdown_pl-mi2_0831b",
  "pl-mdr": "Markdown_pl-mdr_0831b",
  "pl-ba": "Markdown_pl-ba_0831b",
  "pl-sg": "Markdown_pl-sg_0831b",
  "pl-corl": "Markdown_pl-corl_0831b",
  "pl-3": "Markdown_pl-3_0831b",
  "pl-7": "Markdown_pl-7_0831b",
  "pl-8": "Markdown_pl-8_0831b",
  "pl-9": "Markdown_pl-9_0831b",
  "pl-10": "Markdown_pl-10_0831b",
  "pl-11": "Markdown_pl-11_0831b",
  "pl-12": "Markdown_pl-12_0831b",
  highlight,
  "commit-tease-sha": "Markdown_commit-tease-sha_0831b",
  "full-commit": "Markdown_full-commit_0831b",
  "btn-outline": "Markdown_btn-outline_0831b",
  "blob-wrapper": "Markdown_blob-wrapper_0831b",
  "blob-wrapper-embedded": "Markdown_blob-wrapper-embedded_0831b",
  "blob-num": "Markdown_blob-num_0831b",
  "blob-code": "Markdown_blob-code_0831b",
  "blob-code-inner": "Markdown_blob-code-inner_0831b",
  "tab-size": "Markdown_tab-size_0831b",
  "task-list-item": "Markdown_task-list-item_0831b",
  "pl-c1": "Markdown_pl-c1_0831b",
  "pl-v": "Markdown_pl-v_0831b",
  "pl-s": "Markdown_pl-s_0831b",
  "pl-s1": "Markdown_pl-s1_0831b",
  "pl-pse": "Markdown_pl-pse_0831b",
  "pl-e": "Markdown_pl-e_0831b",
  "pl-en": "Markdown_pl-en_0831b",
  "pl-smi": "Markdown_pl-smi_0831b",
  "pl-pds": "Markdown_pl-pds_0831b",
  "pl-smw": "Markdown_pl-smw_0831b",
  "pl-mh": "Markdown_pl-mh_0831b",
  "pl-ms": "Markdown_pl-ms_0831b",
  "pl-token": "Markdown_pl-token_0831b",
  active,
  render,
  placeholder
};
const CodeMirrorEditor = React.lazy(() => Promise.resolve().then(() => /* @__PURE__ */ _interopNamespaceDefaultOnly(require("./CodeMirrorEditor.cjs"))));
const TabType = {
  Edit: "edit",
  Preview: "preview"
};
const MarkdownRender = ({ markdown, placeholder: placeholder2, onClick }) => {
  const showPlaceholder = !markdown && placeholder2;
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: css.render, onClick, children: showPlaceholder ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: css.placeholder, children: placeholder2 }) : /* @__PURE__ */ jsxRuntime.jsx(MarkdownViewer, { options: { disableParsingRawHTML: true }, children: markdown }) });
};
const Markdown = ({
  disabled = false,
  editing = false,
  markdown,
  onChange,
  onClick
}) => {
  const { size } = kit_internal_useResize();
  const tabItems = React.useMemo(() => {
    return [
      {
        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: css.noOverflow, children: /* @__PURE__ */ jsxRuntime.jsx(
          React.Suspense,
          {
            fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(kit_Spinner, { spinning: true, tip: "Loading text editor..." }) }),
            children: /* @__PURE__ */ jsxRuntime.jsx(
              CodeMirrorEditor,
              {
                basicSetup: {
                  autocompletion: false,
                  foldGutter: false,
                  highlightActiveLineGutter: false
                },
                height: `${size.height - 420}px`,
                syntax: "markdown",
                value: markdown,
                width: "100%",
                onChange
              }
            )
          }
        ) }),
        key: TabType.Edit,
        label: "Edit"
      },
      {
        children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownRender, { markdown, onClick }),
        key: TabType.Preview,
        label: "Preview"
      }
    ];
  }, [markdown, onChange, onClick, size]);
  return /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-label": "markdown-editor", className: css.base, tabIndex: 0, children: editing && !disabled ? /* @__PURE__ */ jsxRuntime.jsx(kit_Pivot, { items: tabItems }) : /* @__PURE__ */ jsxRuntime.jsx(
    MarkdownRender,
    {
      markdown,
      placeholder: disabled ? "No note present." : "Add content...",
      onClick
    }
  ) });
};
module.exports = Markdown;
