// packages/block-library/src/accordion-item/edit.js
import { __ } from "@wordpress/i18n";
import {
  useBlockProps,
  useInnerBlocksProps,
  InspectorControls,
  store as blockEditorStore
} from "@wordpress/block-editor";
import { useDispatch, useSelect } from "@wordpress/data";
import { useEffect } from "@wordpress/element";
import {
  ToggleControl,
  __experimentalToolsPanel as ToolsPanel,
  __experimentalToolsPanelItem as ToolsPanelItem
} from "@wordpress/components";
import clsx from "clsx";
import { useToolsPanelDropdownMenuProps } from "../utils/hooks";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function Edit({
  attributes,
  clientId,
  setAttributes,
  context
}) {
  const { openByDefault } = attributes;
  const dropdownMenuProps = useToolsPanelDropdownMenuProps();
  const { isSelected, getBlockOrder } = useSelect(
    (select) => {
      const {
        isBlockSelected,
        hasSelectedInnerBlock,
        getBlockOrder: getBlockOrderSelector
      } = select(blockEditorStore);
      return {
        isSelected: isBlockSelected(clientId) || hasSelectedInnerBlock(clientId, true),
        getBlockOrder: getBlockOrderSelector
      };
    },
    [clientId]
  );
  const contentBlockClientId = getBlockOrder(clientId)[1];
  const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } = useDispatch(blockEditorStore);
  useEffect(() => {
    if (contentBlockClientId) {
      __unstableMarkNextChangeAsNotPersistent();
      updateBlockAttributes(contentBlockClientId, {
        isSelected
      });
    }
  }, [
    isSelected,
    contentBlockClientId,
    __unstableMarkNextChangeAsNotPersistent,
    updateBlockAttributes
  ]);
  const blockProps = useBlockProps({
    className: clsx({
      "is-open": openByDefault || isSelected
    })
  });
  const headingLevel = context && context["core/accordion-heading-level"];
  const innerBlocksProps = useInnerBlocksProps(blockProps, {
    template: [
      [
        "core/accordion-heading",
        headingLevel ? { level: headingLevel } : {}
      ],
      [
        "core/accordion-panel",
        {
          openByDefault
        }
      ]
    ],
    templateLock: "all",
    directInsert: true,
    templateInsertUpdatesSelection: true
  });
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(InspectorControls, { children: /* @__PURE__ */ jsx(
      ToolsPanel,
      {
        label: __("Settings"),
        resetAll: () => {
          setAttributes({ openByDefault: false });
          if (contentBlockClientId) {
            updateBlockAttributes(contentBlockClientId, {
              openByDefault: false
            });
          }
        },
        dropdownMenuProps,
        children: /* @__PURE__ */ jsx(
          ToolsPanelItem,
          {
            label: __("Open by default"),
            isShownByDefault: true,
            hasValue: () => !!openByDefault,
            onDeselect: () => {
              setAttributes({ openByDefault: false });
              if (contentBlockClientId) {
                updateBlockAttributes(contentBlockClientId, {
                  openByDefault: false
                });
              }
            },
            children: /* @__PURE__ */ jsx(
              ToggleControl,
              {
                label: __("Open by default"),
                __nextHasNoMarginBottom: true,
                onChange: (value) => {
                  setAttributes({
                    openByDefault: value
                  });
                  if (contentBlockClientId) {
                    updateBlockAttributes(
                      contentBlockClientId,
                      {
                        openByDefault: value
                      }
                    );
                  }
                },
                checked: openByDefault,
                help: __(
                  "Accordion content will be displayed by default."
                )
              }
            )
          }
        )
      }
    ) }, "setting"),
    /* @__PURE__ */ jsx("div", { ...innerBlocksProps })
  ] });
}
export {
  Edit as default
};
//# sourceMappingURL=edit.js.map
