// packages/block-editor/src/components/global-styles/advanced-panel.js
import {
  TextareaControl,
  Notice,
  __experimentalVStack as VStack
} from "@wordpress/components";
import { useState } from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import { default as transformStyles } from "../../utils/transform-styles";
import { jsx, jsxs } from "react/jsx-runtime";
function AdvancedPanel({
  value,
  onChange,
  inheritedValue = value
}) {
  const [cssError, setCSSError] = useState(null);
  const customCSS = inheritedValue?.css;
  function handleOnChange(newValue) {
    onChange({
      ...value,
      css: newValue
    });
    if (cssError) {
      const [transformed] = transformStyles(
        [{ css: newValue }],
        ".for-validation-only"
      );
      if (transformed) {
        setCSSError(null);
      }
    }
  }
  function handleOnBlur(event) {
    if (!event?.target?.value) {
      setCSSError(null);
      return;
    }
    const [transformed] = transformStyles(
      [{ css: event.target.value }],
      ".for-validation-only"
    );
    setCSSError(
      transformed === null ? __("There is an error with your CSS structure.") : null
    );
  }
  return /* @__PURE__ */ jsxs(VStack, { spacing: 3, children: [
    cssError && /* @__PURE__ */ jsx(Notice, { status: "error", onRemove: () => setCSSError(null), children: cssError }),
    /* @__PURE__ */ jsx(
      TextareaControl,
      {
        label: __("Additional CSS"),
        __nextHasNoMarginBottom: true,
        value: customCSS,
        onChange: (newValue) => handleOnChange(newValue),
        onBlur: handleOnBlur,
        className: "block-editor-global-styles-advanced-panel__custom-css-input",
        spellCheck: false
      }
    )
  ] });
}
export {
  AdvancedPanel as default
};
//# sourceMappingURL=advanced-panel.js.map
