"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _blockEditor = require("@wordpress/block-editor");
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _icons = require("@wordpress/icons");
var _element = require("@wordpress/element");
var _lockUnlock = require("../../../lock-unlock");
var _header = _interopRequireDefault(require("../header"));
var _fontSizePreview = _interopRequireDefault(require("./font-size-preview"));
var _confirmDeleteFontSizeDialog = _interopRequireDefault(require("./confirm-delete-font-size-dialog"));
var _renameFontSizeDialog = _interopRequireDefault(require("./rename-font-size-dialog"));
var _sizeControl = _interopRequireDefault(require("../size-control"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  Menu
} = (0, _lockUnlock.unlock)(_components.privateApis);
const {
  useGlobalSetting
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
function FontSize() {
  var _fontSizes$origin;
  const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = (0, _element.useState)(false);
  const [isRenameDialogOpen, setIsRenameDialogOpen] = (0, _element.useState)(false);
  const {
    params: {
      origin,
      slug
    },
    goBack
  } = (0, _components.useNavigator)();
  const [fontSizes, setFontSizes] = useGlobalSetting('typography.fontSizes');
  const [globalFluid] = useGlobalSetting('typography.fluid');

  // Get the font sizes from the origin, default to empty array.
  const sizes = (_fontSizes$origin = fontSizes[origin]) !== null && _fontSizes$origin !== void 0 ? _fontSizes$origin : [];

  // Get the font size by slug.
  const fontSize = sizes.find(size => size.slug === slug);

  // Navigate to the font sizes list if the font size is not available.
  (0, _element.useEffect)(() => {
    if (!!slug && !fontSize) {
      goBack();
    }
  }, [slug, fontSize, goBack]);
  if (!origin || !slug || !fontSize) {
    return null;
  }

  // Whether the font size is fluid. If not defined, use the global fluid value of the theme.
  const isFluid = fontSize?.fluid !== undefined ? !!fontSize.fluid : !!globalFluid;

  // Whether custom fluid values are used.
  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) {
      // If custom values are used, init the values with the current ones.
      updateFontSize('fluid', {
        min: fontSize.size,
        max: fontSize.size
      });
    } else {
      // If custom fluid values are disabled, set fluid to true.
      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
        }; // Create a new object with updated key
      }
      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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_confirmDeleteFontSizeDialog.default, {
      fontSize: fontSize,
      isOpen: isDeleteConfirmOpen,
      toggleOpen: toggleDeleteConfirm,
      handleRemoveFontSize: handleRemoveFontSize
    }), isRenameDialogOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_renameFontSizeDialog.default, {
      fontSize: fontSize,
      toggleOpen: toggleRenameDialog,
      handleRename: handleNameChange
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
      spacing: 4,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
        justify: "space-between",
        align: "flex-start",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, {
          title: fontSize.name,
          description: (0, _i18n.sprintf)(/* translators: %s: font size preset name. */
          (0, _i18n.__)('Manage the font size %s.'), fontSize.name)
        }), origin === 'custom' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
            marginTop: 3,
            marginBottom: 0,
            paddingX: 4,
            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Menu, {
              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Menu.TriggerButton, {
                render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
                  size: "small",
                  icon: _icons.moreVertical,
                  label: (0, _i18n.__)('Font size options')
                })
              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Menu.Popover, {
                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Menu.Item, {
                  onClick: toggleRenameDialog,
                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu.ItemLabel, {
                    children: (0, _i18n.__)('Rename')
                  })
                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu.Item, {
                  onClick: toggleDeleteConfirm,
                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu.ItemLabel, {
                    children: (0, _i18n.__)('Delete')
                  })
                })]
              })]
            })
          })
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalView, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
          paddingX: 4,
          marginBottom: 0,
          paddingBottom: 6,
          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
            spacing: 4,
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontSizePreview.default, {
                fontSize: fontSize
              })
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sizeControl.default, {
              label: (0, _i18n.__)('Size'),
              value: !isCustomFluid ? fontSize.size : '',
              onChange: handleFontSizeChange,
              disabled: isCustomFluid
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
              label: (0, _i18n.__)('Fluid typography'),
              help: (0, _i18n.__)('Scale the font size dynamically to fit the screen or viewport.'),
              checked: isFluid,
              onChange: handleFluidChange,
              __nextHasNoMarginBottom: true
            }), isFluid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
              label: (0, _i18n.__)('Custom fluid values'),
              help: (0, _i18n.__)('Set custom min and max values for the fluid font size.'),
              checked: isCustomFluid,
              onChange: handleCustomFluidValues,
              __nextHasNoMarginBottom: true
            }), isCustomFluid && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sizeControl.default, {
                label: (0, _i18n.__)('Minimum'),
                value: fontSize.fluid?.min,
                onChange: handleMinChange
              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sizeControl.default, {
                label: (0, _i18n.__)('Maximum'),
                value: fontSize.fluid?.max,
                onChange: handleMaxChange
              })]
            })]
          })
        })
      })]
    })]
  });
}
var _default = exports.default = FontSize;
//# sourceMappingURL=font-size.js.map