// packages/block-library/src/term-name/edit.js
import clsx from "clsx";
import { __ } from "@wordpress/i18n";
import {
  useBlockProps,
  BlockControls,
  AlignmentControl,
  InspectorControls,
  HeadingLevelDropdown
} from "@wordpress/block-editor";
import {
  ToggleControl,
  __experimentalToolsPanel as ToolsPanel,
  __experimentalToolsPanelItem as ToolsPanelItem
} from "@wordpress/components";
import { decodeEntities } from "@wordpress/html-entities";
import { useToolsPanelDropdownMenuProps } from "../utils/hooks";
import { useTermName } from "./use-term-name";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function TermNameEdit({
  attributes,
  setAttributes,
  context: { termId, taxonomy }
}) {
  const { textAlign, level = 0, isLink, levelOptions } = attributes;
  const { term } = useTermName(termId, taxonomy);
  const termName = term?.name ? decodeEntities(term.name) : __("Term Name");
  const blockProps = useBlockProps({
    className: clsx({
      [`has-text-align-${textAlign}`]: textAlign
    })
  });
  const dropdownMenuProps = useToolsPanelDropdownMenuProps();
  const TagName = level === 0 ? "p" : `h${level}`;
  let termNameDisplay = termName;
  if (isLink) {
    termNameDisplay = /* @__PURE__ */ jsx(
      "a",
      {
        href: "#term-name-pseudo-link",
        onClick: (e) => e.preventDefault(),
        children: termName
      }
    );
  }
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsxs(BlockControls, { group: "block", children: [
      /* @__PURE__ */ jsx(
        HeadingLevelDropdown,
        {
          value: level,
          options: levelOptions,
          onChange: (newLevel) => {
            setAttributes({ level: newLevel });
          }
        }
      ),
      /* @__PURE__ */ jsx(
        AlignmentControl,
        {
          value: textAlign,
          onChange: (nextAlign) => {
            setAttributes({ textAlign: nextAlign });
          }
        }
      )
    ] }),
    /* @__PURE__ */ jsx(InspectorControls, { children: /* @__PURE__ */ jsx(
      ToolsPanel,
      {
        label: __("Settings"),
        resetAll: () => {
          setAttributes({
            isLink: false
          });
        },
        dropdownMenuProps,
        children: /* @__PURE__ */ jsx(
          ToolsPanelItem,
          {
            hasValue: () => !!isLink,
            label: __("Make term name a link"),
            onDeselect: () => setAttributes({ isLink: false }),
            isShownByDefault: true,
            children: /* @__PURE__ */ jsx(
              ToggleControl,
              {
                __nextHasNoMarginBottom: true,
                label: __("Make term name a link"),
                onChange: () => setAttributes({ isLink: !isLink }),
                checked: isLink
              }
            )
          }
        )
      }
    ) }),
    /* @__PURE__ */ jsx(TagName, { ...blockProps, children: termNameDisplay })
  ] });
}
export {
  TermNameEdit as default
};
//# sourceMappingURL=edit.js.map
