import { Loader } from "@wix/design-system";
import React from "react";
import { INIT_WIDTH } from "./../plugin-html/defaults.js";
import style from "./html-placeholder-scss.js";
const HtmlPlaceholder = ({ node }) => {
  const html = node.htmlData.html || "";
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: style.container,
      style: {
        maxWidth: (node.htmlData.containerData?.width?.custom || INIT_WIDTH) + "px"
      }
    },
    /* @__PURE__ */ React.createElement("div", { className: style.overlay }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "8px", alignItems: "center" } }, /* @__PURE__ */ React.createElement(Loader, { size: "tiny" }), "Writing code...")),
    /* @__PURE__ */ React.createElement("div", { className: style.innerContainer }, formatWithLineNumbers(html))
  );
};
const formatWithLineNumbers = (inputHtml) => {
  const allLines = inputHtml.split("\n").map((line, index) => `${(index + 1).toString().padStart(4, " ")}: ${line}`);
  const lastLines = allLines.slice(-30);
  return lastLines.join("\n");
};
const HtmlPlaceholderMocked = () => {
  const lines = "sample code\nline two".split("\n");
  const [currentCuttof, setCurrentCutoff] = React.useState(1);
  React.useEffect(() => {
    if (currentCuttof < lines.length) {
      const timeout = setInterval(() => {
        setCurrentCutoff((s) => s + 3);
      }, 500);
      return () => clearInterval(timeout);
    }
  }, []);
  const sampleHtml = lines.slice(0, currentCuttof).join("\n");
  return /* @__PURE__ */ React.createElement("div", { style: { margin: "20px auto", width: "826px" } }, /* @__PURE__ */ React.createElement(HtmlPlaceholder, { node: { type: "html", htmlData: { html: sampleHtml } } }));
};
export {
  HtmlPlaceholder,
  HtmlPlaceholderMocked
};
//# sourceMappingURL=html-placeholder.js.map
