import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
import { __, sprintf } from "@wordpress/i18n";
import {
  __experimentalSpacer as Spacer,
  useNavigator,
  __experimentalView as View,
  __experimentalHStack as HStack,
  __experimentalVStack as VStack,
  privateApis as componentsPrivateApis,
  Button,
  FlexItem,
  ToggleControl
} from "@wordpress/components";
import { moreVertical } from "@wordpress/icons";
import { useState, useEffect } from "@wordpress/element";
import { unlock } from "../../../lock-unlock";
import ScreenHeader from "../header";
import FontSizePreview from "./font-size-preview";
import ConfirmDeleteFontSizeDialog from "./confirm-delete-font-size-dialog";
import RenameFontSizeDialog from "./rename-font-size-dialog";
import SizeControl from "../size-control";
const { Menu } = unlock(componentsPrivateApis);
const { useGlobalSetting } = unlock(blockEditorPrivateApis);
function FontSize() {
  const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = useState(false);
  const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
  const {
    params: { origin, slug },
    goBack
  } = useNavigator();
  const [fontSizes, setFontSizes] = useGlobalSetting(
    "typography.fontSizes"
  );
  const [globalFluid] = useGlobalSetting("typography.fluid");
  const sizes = fontSizes[origin] ?? [];
  const fontSize = sizes.find((size) => size.slug === slug);
  useEffect(() => {
    if (!!slug && !fontSize) {
      goBack();
    }
  }, [slug, fontSize, goBack]);
  if (!origin || !slug || !fontSize) {
    return null;
  }
  const isFluid = fontSize?.fluid !== void 0 ? !!fontSize.fluid : !!globalFluid;
  const isCustomFluid = typeof fontSize?.fluid === "object";
  const handleNameChange = (value) => {
    updateFontSize("name", value);
  };
  const handleFontSizeChange = (value) => {
    updateFontSize("size", value);
  };
  const handleFluidChange = (value) => {
    updateFontSize("fluid", value);
  };
  const handleCustomFluidValues = (value) => {
    if (value) {
      updateFontSize("fluid", {
        min: fontSize.size,
        max: fontSize.size
      });
    } else {
      updateFontSize("fluid", true);
    }
  };
  const handleMinChange = (value) => {
    updateFontSize("fluid", { ...fontSize.fluid, min: value });
  };
  const handleMaxChange = (value) => {
    updateFontSize("fluid", { ...fontSize.fluid, max: value });
  };
  const updateFontSize = (key, value) => {
    const newFontSizes = sizes.map((size) => {
      if (size.slug === slug) {
        return { ...size, [key]: value };
      }
      return size;
    });
    setFontSizes({
      ...fontSizes,
      [origin]: newFontSizes
    });
  };
  const handleRemoveFontSize = () => {
    const newFontSizes = sizes.filter((size) => size.slug !== slug);
    setFontSizes({
      ...fontSizes,
      [origin]: newFontSizes
    });
  };
  const toggleDeleteConfirm = () => {
    setIsDeleteConfirmOpen(!isDeleteConfirmOpen);
  };
  const toggleRenameDialog = () => {
    setIsRenameDialogOpen(!isRenameDialogOpen);
  };
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      ConfirmDeleteFontSizeDialog,
      {
        fontSize,
        isOpen: isDeleteConfirmOpen,
        toggleOpen: toggleDeleteConfirm,
        handleRemoveFontSize
      }
    ),
    isRenameDialogOpen && /* @__PURE__ */ jsx(
      RenameFontSizeDialog,
      {
        fontSize,
        toggleOpen: toggleRenameDialog,
        handleRename: handleNameChange
      }
    ),
    /* @__PURE__ */ jsxs(VStack, { spacing: 4, children: [
      /* @__PURE__ */ jsxs(HStack, { justify: "space-between", align: "flex-start", children: [
        /* @__PURE__ */ jsx(
          ScreenHeader,
          {
            title: fontSize.name,
            description: sprintf(
              /* translators: %s: font size preset name. */
              __("Manage the font size %s."),
              fontSize.name
            )
          }
        ),
        origin === "custom" && /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(
          Spacer,
          {
            marginTop: 3,
            marginBottom: 0,
            paddingX: 4,
            children: /* @__PURE__ */ jsxs(Menu, { children: [
              /* @__PURE__ */ jsx(
                Menu.TriggerButton,
                {
                  render: /* @__PURE__ */ jsx(
                    Button,
                    {
                      size: "small",
                      icon: moreVertical,
                      label: __(
                        "Font size options"
                      )
                    }
                  )
                }
              ),
              /* @__PURE__ */ jsxs(Menu.Popover, { children: [
                /* @__PURE__ */ jsx(
                  Menu.Item,
                  {
                    onClick: toggleRenameDialog,
                    children: /* @__PURE__ */ jsx(Menu.ItemLabel, { children: __("Rename") })
                  }
                ),
                /* @__PURE__ */ jsx(
                  Menu.Item,
                  {
                    onClick: toggleDeleteConfirm,
                    children: /* @__PURE__ */ jsx(Menu.ItemLabel, { children: __("Delete") })
                  }
                )
              ] })
            ] })
          }
        ) })
      ] }),
      /* @__PURE__ */ jsx(View, { children: /* @__PURE__ */ jsx(
        Spacer,
        {
          paddingX: 4,
          marginBottom: 0,
          paddingBottom: 6,
          children: /* @__PURE__ */ jsxs(VStack, { spacing: 4, children: [
            /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(FontSizePreview, { fontSize }) }),
            /* @__PURE__ */ jsx(
              SizeControl,
              {
                label: __("Size"),
                value: !isCustomFluid ? fontSize.size : "",
                onChange: handleFontSizeChange,
                disabled: isCustomFluid
              }
            ),
            /* @__PURE__ */ jsx(
              ToggleControl,
              {
                label: __("Fluid typography"),
                help: __(
                  "Scale the font size dynamically to fit the screen or viewport."
                ),
                checked: isFluid,
                onChange: handleFluidChange,
                __nextHasNoMarginBottom: true
              }
            ),
            isFluid && /* @__PURE__ */ jsx(
              ToggleControl,
              {
                label: __("Custom fluid values"),
                help: __(
                  "Set custom min and max values for the fluid font size."
                ),
                checked: isCustomFluid,
                onChange: handleCustomFluidValues,
                __nextHasNoMarginBottom: true
              }
            ),
            isCustomFluid && /* @__PURE__ */ jsxs(Fragment, { children: [
              /* @__PURE__ */ jsx(
                SizeControl,
                {
                  label: __("Minimum"),
                  value: fontSize.fluid?.min,
                  onChange: handleMinChange
                }
              ),
              /* @__PURE__ */ jsx(
                SizeControl,
                {
                  label: __("Maximum"),
                  value: fontSize.fluid?.max,
                  onChange: handleMaxChange
                }
              )
            ] })
          ] })
        }
      ) })
    ] })
  ] });
}
var font_size_default = FontSize;
export {
  font_size_default as default
};
//# sourceMappingURL=font-size.js.map
