// packages/block-editor/src/components/block-allowed-blocks/modal.js
import {
  Button,
  Flex,
  FlexItem,
  Modal,
  __experimentalText as Text,
  __experimentalVStack as VStack
} from "@wordpress/components";
import { useState } from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import { useDispatch } from "@wordpress/data";
import { store as blockEditorStore } from "../../store";
import BlockManager from "../block-manager";
import { jsx, jsxs } from "react/jsx-runtime";
function BlockAllowedBlocksModal({
  clientId,
  blockTypes,
  selectedBlockTypes,
  onClose
}) {
  const [currentSelectedBlockTypes, setCurrentSelectedBlockTypes] = useState(selectedBlockTypes);
  const { updateBlockAttributes } = useDispatch(blockEditorStore);
  const handleSubmit = () => {
    const isFullySelected = currentSelectedBlockTypes.length === blockTypes.length;
    const newBlockNames = currentSelectedBlockTypes.map(
      ({ name }) => name
    );
    updateBlockAttributes(clientId, {
      allowedBlocks: isFullySelected ? void 0 : newBlockNames
    });
    onClose();
  };
  return /* @__PURE__ */ jsx(
    Modal,
    {
      title: __("Manage allowed blocks"),
      onRequestClose: onClose,
      overlayClassName: "block-editor-block-allowed-blocks-modal",
      focusOnMount: "firstContentElement",
      size: "medium",
      children: /* @__PURE__ */ jsxs(
        VStack,
        {
          as: "form",
          onSubmit: (e) => {
            e.preventDefault();
            handleSubmit();
          },
          spacing: "4",
          children: [
            /* @__PURE__ */ jsx(Text, { children: __(
              "Select which blocks can be added inside this container."
            ) }),
            /* @__PURE__ */ jsx(
              BlockManager,
              {
                blockTypes,
                selectedBlockTypes: currentSelectedBlockTypes,
                onChange: (newSelectedBlockTypes) => {
                  setCurrentSelectedBlockTypes(newSelectedBlockTypes);
                }
              }
            ),
            /* @__PURE__ */ jsxs(
              Flex,
              {
                className: "block-editor-block-allowed-blocks-modal__actions",
                justify: "flex-end",
                expanded: false,
                children: [
                  /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(
                    Button,
                    {
                      variant: "tertiary",
                      onClick: onClose,
                      __next40pxDefaultSize: true,
                      children: __("Cancel")
                    }
                  ) }),
                  /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(
                    Button,
                    {
                      variant: "primary",
                      type: "submit",
                      __next40pxDefaultSize: true,
                      children: __("Apply")
                    }
                  ) })
                ]
              }
            )
          ]
        }
      )
    }
  );
}
export {
  BlockAllowedBlocksModal as default
};
//# sourceMappingURL=modal.js.map
