// packages/block-library/src/home-link/edit.js
import clsx from "clsx";
import {
  InspectorControls,
  RichText,
  useBlockProps,
  store as blockEditorStore
} from "@wordpress/block-editor";
import {
  Button,
  CheckboxControl,
  TextControl,
  TextareaControl,
  __experimentalToolsPanel as ToolsPanel,
  __experimentalToolsPanelItem as ToolsPanelItem
} from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import { useSelect } from "@wordpress/data";
import { store as coreStore } from "@wordpress/core-data";
import { external } from "@wordpress/icons";
import { __unstableStripHTML as stripHTML } from "@wordpress/dom";
import { useToolsPanelDropdownMenuProps } from "../utils/hooks.mjs";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var preventDefault = (event) => event.preventDefault();
function HomeEdit({ attributes, setAttributes, context }) {
  const {
    homeUrl,
    onNavigateToEntityRecord,
    frontPageId,
    frontPageTemplateId
  } = useSelect((select) => {
    const { getEntityRecord, getDefaultTemplateId, canUser } = select(coreStore);
    const baseUrl = getEntityRecord("root", "__unstableBase")?.home;
    const canReadSettings = canUser("read", {
      kind: "root",
      name: "site"
    });
    const site = canReadSettings ? getEntityRecord("root", "site") : null;
    const resolvedFrontPageId = site?.show_on_front === "page" ? site?.page_on_front : null;
    const resolvedFrontPageTemplateId = !resolvedFrontPageId ? getDefaultTemplateId({ slug: "front-page" }) : null;
    return {
      homeUrl: baseUrl,
      onNavigateToEntityRecord: select(blockEditorStore).getSettings().onNavigateToEntityRecord,
      frontPageId: resolvedFrontPageId,
      frontPageTemplateId: resolvedFrontPageTemplateId
    };
  }, []);
  const { textColor, backgroundColor, style } = context;
  const { label, opensInNewTab, description } = attributes;
  const dropdownMenuProps = useToolsPanelDropdownMenuProps();
  const blockProps = useBlockProps({
    className: clsx("wp-block-navigation-item", {
      "has-text-color": !!textColor || !!style?.color?.text,
      [`has-${textColor}-color`]: !!textColor,
      "has-background": !!backgroundColor || !!style?.color?.background,
      [`has-${backgroundColor}-background-color`]: !!backgroundColor
    }),
    style: {
      color: style?.color?.text,
      backgroundColor: style?.color?.background
    }
  });
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(InspectorControls, { group: "content", children: /* @__PURE__ */ jsxs(
      ToolsPanel,
      {
        label: __("Settings"),
        resetAll: () => {
          setAttributes({
            label: "",
            opensInNewTab: false,
            description: ""
          });
        },
        dropdownMenuProps,
        children: [
          /* @__PURE__ */ jsx(
            ToolsPanelItem,
            {
              hasValue: () => !!label,
              label: __("Text"),
              onDeselect: () => setAttributes({ label: "" }),
              isShownByDefault: true,
              children: /* @__PURE__ */ jsx(
                TextControl,
                {
                  label: __("Text"),
                  value: label ? stripHTML(label) : "",
                  onChange: (labelValue) => {
                    setAttributes({ label: labelValue });
                  },
                  autoComplete: "off"
                }
              )
            }
          ),
          /* @__PURE__ */ jsx(
            ToolsPanelItem,
            {
              hasValue: () => !!opensInNewTab,
              label: __("Open in new tab"),
              onDeselect: () => setAttributes({ opensInNewTab: false }),
              isShownByDefault: true,
              children: /* @__PURE__ */ jsx(
                CheckboxControl,
                {
                  label: __("Open in new tab"),
                  checked: opensInNewTab,
                  onChange: (value) => setAttributes({ opensInNewTab: value })
                }
              )
            }
          ),
          onNavigateToEntityRecord && (frontPageId || frontPageTemplateId) && /* @__PURE__ */ jsx(
            Button,
            {
              variant: "secondary",
              onClick: () => {
                if (frontPageId) {
                  onNavigateToEntityRecord({
                    postId: frontPageId,
                    postType: "page"
                  });
                } else {
                  onNavigateToEntityRecord({
                    postId: frontPageTemplateId,
                    postType: "wp_template"
                  });
                }
              },
              __next40pxDefaultSize: true,
              className: "navigation-link-to__action-button",
              children: __("Edit")
            }
          ),
          homeUrl && /* @__PURE__ */ jsx(
            Button,
            {
              variant: "secondary",
              href: homeUrl,
              target: "_blank",
              icon: external,
              iconPosition: "right",
              __next40pxDefaultSize: true,
              className: "navigation-link-to__action-button",
              children: __("View")
            }
          ),
          /* @__PURE__ */ jsx(
            ToolsPanelItem,
            {
              hasValue: () => !!description,
              label: __("Description"),
              onDeselect: () => setAttributes({ description: "" }),
              isShownByDefault: true,
              children: /* @__PURE__ */ jsx(
                TextareaControl,
                {
                  label: __("Description"),
                  value: description || "",
                  onChange: (descriptionValue) => {
                    setAttributes({
                      description: descriptionValue
                    });
                  },
                  help: __(
                    "The description will be displayed in the menu if the current theme supports it."
                  )
                }
              )
            }
          )
        ]
      }
    ) }),
    /* @__PURE__ */ jsx("div", { ...blockProps, children: /* @__PURE__ */ jsxs(
      "a",
      {
        className: "wp-block-home-link__content wp-block-navigation-item__content",
        href: homeUrl,
        onClick: preventDefault,
        children: [
          /* @__PURE__ */ jsx(
            RichText,
            {
              identifier: "label",
              className: "wp-block-home-link__label",
              value: label ?? __("Home"),
              onChange: (labelValue) => {
                setAttributes({ label: labelValue });
              },
              "aria-label": __("Home link text"),
              placeholder: __("Add label…"),
              withoutInteractiveFormatting: true
            }
          ),
          description && /* @__PURE__ */ jsx("span", { className: "wp-block-navigation-item__description", children: description })
        ]
      }
    ) })
  ] });
}
export {
  HomeEdit as default
};
//# sourceMappingURL=edit.mjs.map
