import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import clsx from "clsx";
import {
  Placeholder,
  SelectControl,
  Spinner,
  ToggleControl,
  VisuallyHidden,
  __experimentalToolsPanel as ToolsPanel,
  __experimentalToolsPanelItem as ToolsPanelItem
} from "@wordpress/components";
import { useInstanceId } from "@wordpress/compose";
import {
  InspectorControls,
  useBlockProps,
  RichText
} from "@wordpress/block-editor";
import { decodeEntities } from "@wordpress/html-entities";
import { __, sprintf } from "@wordpress/i18n";
import { pin } from "@wordpress/icons";
import { useEntityRecords } from "@wordpress/core-data";
import { useDispatch } from "@wordpress/data";
import { store as noticeStore } from "@wordpress/notices";
import { useToolsPanelDropdownMenuProps } from "../utils/hooks";
function CategoriesEdit({
  attributes: {
    displayAsDropdown,
    showHierarchy,
    showPostCounts,
    showOnlyTopLevel,
    showEmpty,
    label,
    showLabel,
    taxonomy: taxonomySlug
  },
  setAttributes,
  className,
  clientId
}) {
  const selectId = useInstanceId(CategoriesEdit, "blocks-category-select");
  const { records: allTaxonomies, isResolvingTaxonomies } = useEntityRecords(
    "root",
    "taxonomy",
    { per_page: -1 }
  );
  const taxonomies = allTaxonomies?.filter((t) => t.visibility.public);
  const taxonomy = taxonomies?.find((t) => t.slug === taxonomySlug);
  const isHierarchicalTaxonomy = !isResolvingTaxonomies && taxonomy?.hierarchical;
  const query = { per_page: -1, hide_empty: !showEmpty, context: "view" };
  if (isHierarchicalTaxonomy && showOnlyTopLevel) {
    query.parent = 0;
  }
  const { records: categories, isResolving } = useEntityRecords(
    "taxonomy",
    taxonomySlug,
    query
  );
  const { createWarningNotice } = useDispatch(noticeStore);
  const showRedirectionPreventedNotice = (event) => {
    event.preventDefault();
    createWarningNotice(__("Links are disabled in the editor."), {
      id: `block-library/core/categories/redirection-prevented/${clientId}`,
      type: "snackbar"
    });
  };
  const getCategoriesList = (parentId) => {
    if (!categories?.length) {
      return [];
    }
    if (parentId === null) {
      return categories;
    }
    return categories.filter(({ parent }) => parent === parentId);
  };
  const toggleAttribute = (attributeName) => (newValue) => setAttributes({ [attributeName]: newValue });
  const renderCategoryName = (name) => !name ? __("(Untitled)") : decodeEntities(name).trim();
  const renderCategoryList = () => {
    const parentId = isHierarchicalTaxonomy && showHierarchy ? 0 : null;
    const categoriesList = getCategoriesList(parentId);
    return categoriesList.map(
      (category) => renderCategoryListItem(category)
    );
  };
  const renderCategoryListItem = (category) => {
    const childCategories = getCategoriesList(category.id);
    const { id, link, count, name } = category;
    return /* @__PURE__ */ jsxs("li", { className: `cat-item cat-item-${id}`, children: [
      /* @__PURE__ */ jsx("a", { href: link, onClick: showRedirectionPreventedNotice, children: renderCategoryName(name) }),
      showPostCounts && ` (${count})`,
      isHierarchicalTaxonomy && showHierarchy && !!childCategories.length && /* @__PURE__ */ jsx("ul", { className: "children", children: childCategories.map(
        (childCategory) => renderCategoryListItem(childCategory)
      ) })
    ] }, id);
  };
  const renderCategoryDropdown = () => {
    const parentId = isHierarchicalTaxonomy && showHierarchy ? 0 : null;
    const categoriesList = getCategoriesList(parentId);
    return /* @__PURE__ */ jsxs(Fragment, { children: [
      showLabel ? /* @__PURE__ */ jsx(
        RichText,
        {
          className: "wp-block-categories__label",
          "aria-label": __("Label text"),
          placeholder: taxonomy?.name,
          withoutInteractiveFormatting: true,
          value: label,
          onChange: (html) => setAttributes({ label: html })
        }
      ) : /* @__PURE__ */ jsx(VisuallyHidden, { as: "label", htmlFor: selectId, children: label ? label : taxonomy?.name }),
      /* @__PURE__ */ jsxs("select", { id: selectId, children: [
        /* @__PURE__ */ jsx("option", { children: sprintf(
          /* translators: %s: taxonomy's singular name */
          __("Select %s"),
          taxonomy?.labels?.singular_name
        ) }),
        categoriesList.map(
          (category) => renderCategoryDropdownItem(category, 0)
        )
      ] })
    ] });
  };
  const renderCategoryDropdownItem = (category, level) => {
    const { id, count, name } = category;
    const childCategories = getCategoriesList(id);
    return [
      /* @__PURE__ */ jsxs("option", { className: `level-${level}`, children: [
        Array.from({ length: level * 3 }).map(() => "\xA0"),
        renderCategoryName(name),
        showPostCounts && ` (${count})`
      ] }, id),
      isHierarchicalTaxonomy && showHierarchy && !!childCategories.length && childCategories.map(
        (childCategory) => renderCategoryDropdownItem(childCategory, level + 1)
      )
    ];
  };
  const TagName = !!categories?.length && !displayAsDropdown && !isResolving ? "ul" : "div";
  const classes = clsx(className, {
    "wp-block-categories-list": !!categories?.length && !displayAsDropdown && !isResolving,
    "wp-block-categories-dropdown": !!categories?.length && displayAsDropdown && !isResolving
  });
  const blockProps = useBlockProps({
    className: classes
  });
  const dropdownMenuProps = useToolsPanelDropdownMenuProps();
  return /* @__PURE__ */ jsxs(TagName, { ...blockProps, children: [
    /* @__PURE__ */ jsx(InspectorControls, { children: /* @__PURE__ */ jsxs(
      ToolsPanel,
      {
        label: __("Settings"),
        resetAll: () => {
          setAttributes({
            taxonomy: "category",
            displayAsDropdown: false,
            showHierarchy: false,
            showPostCounts: false,
            showOnlyTopLevel: false,
            showEmpty: false,
            showLabel: true
          });
        },
        dropdownMenuProps,
        children: [
          Array.isArray(taxonomies) && /* @__PURE__ */ jsx(
            ToolsPanelItem,
            {
              hasValue: () => {
                return taxonomySlug !== "category";
              },
              label: __("Taxonomy"),
              onDeselect: () => {
                setAttributes({ taxonomy: "category" });
              },
              isShownByDefault: true,
              children: /* @__PURE__ */ jsx(
                SelectControl,
                {
                  __nextHasNoMarginBottom: true,
                  __next40pxDefaultSize: true,
                  label: __("Taxonomy"),
                  options: taxonomies.map((t) => ({
                    label: t.name,
                    value: t.slug
                  })),
                  value: taxonomySlug,
                  onChange: (selectedTaxonomy) => setAttributes({
                    taxonomy: selectedTaxonomy
                  })
                }
              )
            }
          ),
          /* @__PURE__ */ jsx(
            ToolsPanelItem,
            {
              hasValue: () => !!displayAsDropdown,
              label: __("Display as dropdown"),
              onDeselect: () => setAttributes({ displayAsDropdown: false }),
              isShownByDefault: true,
              children: /* @__PURE__ */ jsx(
                ToggleControl,
                {
                  __nextHasNoMarginBottom: true,
                  label: __("Display as dropdown"),
                  checked: displayAsDropdown,
                  onChange: toggleAttribute("displayAsDropdown")
                }
              )
            }
          ),
          displayAsDropdown && /* @__PURE__ */ jsx(
            ToolsPanelItem,
            {
              hasValue: () => !showLabel,
              label: __("Show label"),
              onDeselect: () => setAttributes({ showLabel: true }),
              isShownByDefault: true,
              children: /* @__PURE__ */ jsx(
                ToggleControl,
                {
                  __nextHasNoMarginBottom: true,
                  className: "wp-block-categories__indentation",
                  label: __("Show label"),
                  checked: showLabel,
                  onChange: toggleAttribute("showLabel")
                }
              )
            }
          ),
          /* @__PURE__ */ jsx(
            ToolsPanelItem,
            {
              hasValue: () => !!showPostCounts,
              label: __("Show post counts"),
              onDeselect: () => setAttributes({ showPostCounts: false }),
              isShownByDefault: true,
              children: /* @__PURE__ */ jsx(
                ToggleControl,
                {
                  __nextHasNoMarginBottom: true,
                  label: __("Show post counts"),
                  checked: showPostCounts,
                  onChange: toggleAttribute("showPostCounts")
                }
              )
            }
          ),
          isHierarchicalTaxonomy && /* @__PURE__ */ jsx(
            ToolsPanelItem,
            {
              hasValue: () => !!showOnlyTopLevel,
              label: __("Show only top level terms"),
              onDeselect: () => setAttributes({ showOnlyTopLevel: false }),
              isShownByDefault: true,
              children: /* @__PURE__ */ jsx(
                ToggleControl,
                {
                  __nextHasNoMarginBottom: true,
                  label: __("Show only top level terms"),
                  checked: showOnlyTopLevel,
                  onChange: toggleAttribute(
                    "showOnlyTopLevel"
                  )
                }
              )
            }
          ),
          /* @__PURE__ */ jsx(
            ToolsPanelItem,
            {
              hasValue: () => !!showEmpty,
              label: __("Show empty terms"),
              onDeselect: () => setAttributes({ showEmpty: false }),
              isShownByDefault: true,
              children: /* @__PURE__ */ jsx(
                ToggleControl,
                {
                  __nextHasNoMarginBottom: true,
                  label: __("Show empty terms"),
                  checked: showEmpty,
                  onChange: toggleAttribute("showEmpty")
                }
              )
            }
          ),
          isHierarchicalTaxonomy && !showOnlyTopLevel && /* @__PURE__ */ jsx(
            ToolsPanelItem,
            {
              hasValue: () => !!showHierarchy,
              label: __("Show hierarchy"),
              onDeselect: () => setAttributes({ showHierarchy: false }),
              isShownByDefault: true,
              children: /* @__PURE__ */ jsx(
                ToggleControl,
                {
                  __nextHasNoMarginBottom: true,
                  label: __("Show hierarchy"),
                  checked: showHierarchy,
                  onChange: toggleAttribute("showHierarchy")
                }
              )
            }
          )
        ]
      }
    ) }),
    isResolving && /* @__PURE__ */ jsx(Placeholder, { icon: pin, label: __("Terms"), children: /* @__PURE__ */ jsx(Spinner, {}) }),
    !isResolving && categories?.length === 0 && /* @__PURE__ */ jsx("p", { children: taxonomy.labels.no_terms }),
    !isResolving && categories?.length > 0 && (displayAsDropdown ? renderCategoryDropdown() : renderCategoryList())
  ] });
}
export {
  CategoriesEdit as default
};
//# sourceMappingURL=edit.js.map
