// packages/block-editor/src/components/global-styles/state-control.js
import { __ } from "@wordpress/i18n";
import { check, chevronDown } from "@wordpress/icons";
import {
  DropdownMenu,
  MenuGroup,
  MenuItem,
  privateApis as componentsPrivateApis
} from "@wordpress/components";
import { Stack } from "@wordpress/ui";
import { unlock } from "../../lock-unlock.mjs";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var { Badge: WCBadge } = unlock(componentsPrivateApis);
function StateControl({
  viewportStates = [],
  pseudoStates = [],
  viewportValue = "default",
  pseudoStateValue = "default",
  onChangeViewport,
  onChangePseudoState
}) {
  if (!viewportStates.length && !pseudoStates.length) {
    return null;
  }
  const viewportOptions = [
    { label: __("Default"), value: "default" },
    ...viewportStates.map((state) => ({
      label: state.label,
      value: state.value
    }))
  ];
  const pseudoStateOptions = [
    { label: __("Default"), value: "default" },
    ...pseudoStates.map((state) => ({
      label: state.label,
      value: state.value
    }))
  ];
  const hasViewportOptions = viewportStates.length > 0;
  const hasPseudoStateOptions = pseudoStates.length > 0;
  const triggerLabel = __("States");
  const activeStates = [];
  if (hasViewportOptions && viewportValue !== "default") {
    const selectedViewport = viewportOptions.find(
      (option) => option.value === viewportValue
    );
    if (selectedViewport) {
      activeStates.push({
        key: `viewport-${selectedViewport.value}`,
        label: selectedViewport.label
      });
    }
  }
  if (hasPseudoStateOptions && pseudoStateValue !== "default") {
    const selectedPseudoState = pseudoStateOptions.find(
      (option) => option.value === pseudoStateValue
    );
    if (selectedPseudoState) {
      activeStates.push({
        key: `pseudo-${selectedPseudoState.value}`,
        label: selectedPseudoState.label
      });
    }
  }
  return /* @__PURE__ */ jsxs(
    Stack,
    {
      direction: "column",
      gap: "sm",
      align: "flex-end",
      className: "block-editor-global-styles-state-control",
      children: [
        /* @__PURE__ */ jsx(
          DropdownMenu,
          {
            icon: chevronDown,
            label: triggerLabel,
            popoverProps: {
              placement: "right-start"
            },
            text: triggerLabel,
            toggleProps: {
              size: "compact",
              variant: "tertiary",
              iconPosition: "right"
            },
            children: ({ onClose }) => /* @__PURE__ */ jsxs(Fragment, { children: [
              hasViewportOptions && /* @__PURE__ */ jsx(MenuGroup, { label: __("Viewport"), children: viewportOptions.map((option) => /* @__PURE__ */ jsx(
                MenuItem,
                {
                  onClick: () => {
                    onChangeViewport?.(option.value);
                    if (!hasPseudoStateOptions) {
                      onClose();
                    }
                  },
                  icon: viewportValue === option.value ? check : null,
                  children: option.label
                },
                `viewport-${option.value}`
              )) }),
              hasPseudoStateOptions && /* @__PURE__ */ jsx(MenuGroup, { label: __("Pseudo state"), children: pseudoStateOptions.map((option) => /* @__PURE__ */ jsx(
                MenuItem,
                {
                  onClick: () => {
                    onChangePseudoState?.(
                      option.value
                    );
                    if (!hasViewportOptions) {
                      onClose();
                    }
                  },
                  icon: pseudoStateValue === option.value ? check : null,
                  children: option.label
                },
                `pseudo-${option.value}`
              )) })
            ] })
          }
        ),
        /* @__PURE__ */ jsx(
          Stack,
          {
            className: "block-editor-global-styles-state-control__badges",
            direction: "row",
            justify: "flex-start",
            gap: "xs",
            wrap: "wrap",
            children: activeStates.map((activeState) => /* @__PURE__ */ jsx(WCBadge, { intent: "info", children: activeState.label }, activeState.key))
          }
        )
      ]
    }
  );
}
export {
  StateControl as default
};
//# sourceMappingURL=state-control.mjs.map
