// packages/block-editor/src/hooks/position.js
import clsx from "clsx";
import { __, _x, sprintf } from "@wordpress/i18n";
import { getBlockSupport, hasBlockSupport } from "@wordpress/blocks";
import { BaseControl, CustomSelectControl } from "@wordpress/components";
import { useInstanceId } from "@wordpress/compose";
import { useSelect } from "@wordpress/data";
import { useMemo, Platform } from "@wordpress/element";
import { useSettings } from "../components/use-settings";
import InspectorControls from "../components/inspector-controls";
import useBlockDisplayInformation from "../components/use-block-display-information";
import { cleanEmptyObject, useStyleOverride } from "./utils";
import { store as blockEditorStore } from "../store";
import { jsx } from "react/jsx-runtime";
var POSITION_SUPPORT_KEY = "position";
var DEFAULT_OPTION = {
  key: "default",
  value: "",
  name: __("Default")
};
var STICKY_OPTION = {
  key: "sticky",
  value: "sticky",
  name: _x("Sticky", "Name for the value of the CSS position property"),
  hint: __(
    "The block will stick to the top of the window instead of scrolling."
  )
};
var FIXED_OPTION = {
  key: "fixed",
  value: "fixed",
  name: _x("Fixed", "Name for the value of the CSS position property"),
  hint: __("The block will not move when the page is scrolled.")
};
var POSITION_SIDES = ["top", "right", "bottom", "left"];
var VALID_POSITION_TYPES = ["sticky", "fixed"];
function getPositionCSS({ selector, style }) {
  let output = "";
  const { type: positionType } = style?.position || {};
  if (!VALID_POSITION_TYPES.includes(positionType)) {
    return output;
  }
  output += `${selector} {`;
  output += `position: ${positionType};`;
  POSITION_SIDES.forEach((side) => {
    if (style?.position?.[side] !== void 0) {
      output += `${side}: ${style.position[side]};`;
    }
  });
  if (positionType === "sticky" || positionType === "fixed") {
    output += `z-index: 10`;
  }
  output += `}`;
  return output;
}
function hasStickyPositionSupport(blockType) {
  const support = getBlockSupport(blockType, POSITION_SUPPORT_KEY);
  return !!(true === support || support?.sticky);
}
function hasFixedPositionSupport(blockType) {
  const support = getBlockSupport(blockType, POSITION_SUPPORT_KEY);
  return !!(true === support || support?.fixed);
}
function hasPositionSupport(blockType) {
  const support = getBlockSupport(blockType, POSITION_SUPPORT_KEY);
  return !!support;
}
function hasPositionValue(props) {
  return props.attributes.style?.position?.type !== void 0;
}
function hasStickyOrFixedPositionValue(attributes) {
  const positionType = attributes?.style?.position?.type;
  return positionType === "sticky" || positionType === "fixed";
}
function resetPosition({ attributes = {}, setAttributes }) {
  const { style = {} } = attributes;
  setAttributes({
    style: cleanEmptyObject({
      ...style,
      position: {
        ...style?.position,
        type: void 0,
        top: void 0,
        right: void 0,
        bottom: void 0,
        left: void 0
      }
    })
  });
}
function useIsPositionDisabled({ name: blockName } = {}) {
  const [allowFixed, allowSticky] = useSettings(
    "position.fixed",
    "position.sticky"
  );
  const isDisabled = !allowFixed && !allowSticky;
  return !hasPositionSupport(blockName) || isDisabled;
}
function PositionPanelPure({
  style = {},
  clientId,
  name: blockName,
  setAttributes
}) {
  const allowFixed = hasFixedPositionSupport(blockName);
  const allowSticky = hasStickyPositionSupport(blockName);
  const value = style?.position?.type;
  const { firstParentClientId } = useSelect(
    (select) => {
      const { getBlockParents } = select(blockEditorStore);
      const parents = getBlockParents(clientId);
      return { firstParentClientId: parents[parents.length - 1] };
    },
    [clientId]
  );
  const blockInformation = useBlockDisplayInformation(firstParentClientId);
  const stickyHelpText = allowSticky && value === STICKY_OPTION.value && blockInformation ? sprintf(
    /* translators: %s: the name of the parent block. */
    __(
      "The block will stick to the scrollable area of the parent %s block."
    ),
    blockInformation.title
  ) : null;
  const options = useMemo(() => {
    const availableOptions = [DEFAULT_OPTION];
    if (allowSticky || value === STICKY_OPTION.value) {
      availableOptions.push(STICKY_OPTION);
    }
    if (allowFixed || value === FIXED_OPTION.value) {
      availableOptions.push(FIXED_OPTION);
    }
    return availableOptions;
  }, [allowFixed, allowSticky, value]);
  const onChangeType = (next) => {
    const placementValue = "0px";
    const newStyle = {
      ...style,
      position: {
        ...style?.position,
        type: next,
        top: next === "sticky" || next === "fixed" ? placementValue : void 0
      }
    };
    setAttributes({
      style: cleanEmptyObject(newStyle)
    });
  };
  const selectedOption = value ? options.find((option) => option.value === value) || DEFAULT_OPTION : DEFAULT_OPTION;
  return Platform.select({
    web: options.length > 1 ? /* @__PURE__ */ jsx(InspectorControls, { group: "position", children: /* @__PURE__ */ jsx(
      BaseControl,
      {
        __nextHasNoMarginBottom: true,
        help: stickyHelpText,
        children: /* @__PURE__ */ jsx(
          CustomSelectControl,
          {
            __next40pxDefaultSize: true,
            label: __("Position"),
            hideLabelFromVision: true,
            describedBy: sprintf(
              // translators: %s: Currently selected position.
              __("Currently selected position: %s"),
              selectedOption.name
            ),
            options,
            value: selectedOption,
            onChange: ({ selectedItem }) => {
              onChangeType(selectedItem.value);
            },
            size: "__unstable-large"
          }
        )
      }
    ) }) : null,
    native: null
  });
}
var position_default = {
  edit: function Edit(props) {
    const isPositionDisabled = useIsPositionDisabled(props);
    if (isPositionDisabled) {
      return null;
    }
    return /* @__PURE__ */ jsx(PositionPanelPure, { ...props });
  },
  useBlockProps,
  attributeKeys: ["style"],
  hasSupport(name) {
    return hasBlockSupport(name, POSITION_SUPPORT_KEY);
  }
};
var POSITION_BLOCK_PROPS_REFERENCE = {};
function useBlockProps({ name, style }) {
  const hasPositionBlockSupport = hasBlockSupport(
    name,
    POSITION_SUPPORT_KEY
  );
  const isPositionDisabled = useIsPositionDisabled({ name });
  const allowPositionStyles = hasPositionBlockSupport && !isPositionDisabled;
  const id = useInstanceId(POSITION_BLOCK_PROPS_REFERENCE);
  const positionSelector = `.wp-container-${id}.wp-container-${id}`;
  let css;
  if (allowPositionStyles) {
    css = getPositionCSS({
      selector: positionSelector,
      style
    }) || "";
  }
  const className = clsx({
    [`wp-container-${id}`]: allowPositionStyles && !!css,
    // Only attach a container class if there is generated CSS to be attached.
    [`is-position-${style?.position?.type}`]: allowPositionStyles && !!css && !!style?.position?.type
  });
  useStyleOverride({ css });
  return { className };
}
export {
  PositionPanelPure,
  position_default as default,
  getPositionCSS,
  hasFixedPositionSupport,
  hasPositionSupport,
  hasPositionValue,
  hasStickyOrFixedPositionValue,
  hasStickyPositionSupport,
  resetPosition,
  useIsPositionDisabled
};
//# sourceMappingURL=position.js.map
