"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _blockEditor = require("@wordpress/block-editor");
var _navigationButton = require("./navigation-button");
var _subtitle = _interopRequireDefault(require("./subtitle"));
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  useGlobalStyle
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
function ElementItem({
  parentMenu,
  element,
  label
}) {
  var _ref;
  const prefix = element === 'text' || !element ? '' : `elements.${element}.`;
  const extraStyles = element === 'link' ? {
    textDecoration: 'underline'
  } : {};
  const [fontFamily] = useGlobalStyle(prefix + 'typography.fontFamily');
  const [fontStyle] = useGlobalStyle(prefix + 'typography.fontStyle');
  const [fontWeight] = useGlobalStyle(prefix + 'typography.fontWeight');
  const [backgroundColor] = useGlobalStyle(prefix + 'color.background');
  const [fallbackBackgroundColor] = useGlobalStyle('color.background');
  const [gradientValue] = useGlobalStyle(prefix + 'color.gradient');
  const [color] = useGlobalStyle(prefix + 'color.text');
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationButton.NavigationButtonAsItem, {
    path: parentMenu + '/typography/' + element,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
      justify: "flex-start",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
        className: "edit-site-global-styles-screen-typography__indicator",
        style: {
          fontFamily: fontFamily !== null && fontFamily !== void 0 ? fontFamily : 'serif',
          background: (_ref = gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor) !== null && _ref !== void 0 ? _ref : fallbackBackgroundColor,
          color,
          fontStyle,
          fontWeight,
          ...extraStyles
        },
        "aria-hidden": "true",
        children: (0, _i18n.__)('Aa')
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
        children: label
      })]
    })
  });
}
function TypographyElements() {
  const parentMenu = '';
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
    spacing: 3,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_subtitle.default, {
      level: 3,
      children: (0, _i18n.__)('Elements')
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalItemGroup, {
      isBordered: true,
      isSeparated: true,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ElementItem, {
        parentMenu: parentMenu,
        element: "text",
        label: (0, _i18n.__)('Text')
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ElementItem, {
        parentMenu: parentMenu,
        element: "link",
        label: (0, _i18n.__)('Links')
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ElementItem, {
        parentMenu: parentMenu,
        element: "heading",
        label: (0, _i18n.__)('Headings')
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ElementItem, {
        parentMenu: parentMenu,
        element: "caption",
        label: (0, _i18n.__)('Captions')
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ElementItem, {
        parentMenu: parentMenu,
        element: "button",
        label: (0, _i18n.__)('Buttons')
      })]
    })]
  });
}
var _default = exports.default = TypographyElements;
//# sourceMappingURL=typography-elements.js.map