// packages/block-editor/src/components/global-styles/advanced-panel.js
import { TextareaControl, Notice } from "@wordpress/components";
import { Stack } from "@wordpress/ui";
import { useState } from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import { default as transformStyles } from "../../utils/transform-styles/index.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
function validateCSS(css) {
  if (typeof css === "string" && /<\/?\w/.test(css)) {
    return false;
  }
  return true;
}
function getMarkupValidationError(css) {
  return validateCSS(css) ? null : __("The custom CSS is invalid. Do not use <> markup.");
}
function getCSSValidationError(css) {
  if (!css) {
    return null;
  }
  const markupError = getMarkupValidationError(css);
  if (markupError) {
    return markupError;
  }
  const [transformed] = transformStyles(
    [{ css }],
    ".for-validation-only"
  );
  return transformed === null ? __("There is an error with your CSS structure.") : null;
}
function AdvancedPanel({
  value,
  onChange,
  inheritedValue = value,
  help
}) {
  const customCSS = inheritedValue?.css;
  const [cssError, setCSSError] = useState(
    () => getCSSValidationError(customCSS)
  );
  function handleOnChange(newValue) {
    onChange({
      ...value,
      css: newValue
    });
    setCSSError(getMarkupValidationError(newValue));
  }
  function handleOnBlur(event) {
    setCSSError(getCSSValidationError(event?.target?.value));
  }
  return /* @__PURE__ */ jsxs(
    Stack,
    {
      direction: "column",
      gap: "md",
      className: "block-editor-global-styles-advanced-panel",
      children: [
        cssError && /* @__PURE__ */ jsx(Notice, { status: "error", onRemove: () => setCSSError(null), children: cssError }),
        /* @__PURE__ */ jsx(
          TextareaControl,
          {
            label: __("Additional CSS"),
            value: customCSS,
            onChange: (newValue) => handleOnChange(newValue),
            onBlur: handleOnBlur,
            className: "block-editor-global-styles-advanced-panel__custom-css-input",
            spellCheck: false,
            help
          }
        )
      ]
    }
  );
}
export {
  AdvancedPanel as default,
  validateCSS
};
//# sourceMappingURL=advanced-panel.mjs.map
