"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 _element = require("@wordpress/element");
var _typographyPanel = _interopRequireDefault(require("./typography-panel"));
var _header = _interopRequireDefault(require("./header"));
var _typographyPreview = _interopRequireDefault(require("./typography-preview"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const elements = {
  text: {
    description: (0, _i18n.__)('Manage the fonts used on the site.'),
    title: (0, _i18n.__)('Text')
  },
  link: {
    description: (0, _i18n.__)('Manage the fonts and typography used on the links.'),
    title: (0, _i18n.__)('Links')
  },
  heading: {
    description: (0, _i18n.__)('Manage the fonts and typography used on headings.'),
    title: (0, _i18n.__)('Headings')
  },
  caption: {
    description: (0, _i18n.__)('Manage the fonts and typography used on captions.'),
    title: (0, _i18n.__)('Captions')
  },
  button: {
    description: (0, _i18n.__)('Manage the fonts and typography used on buttons.'),
    title: (0, _i18n.__)('Buttons')
  }
};
function ScreenTypographyElement({
  element
}) {
  const [headingLevel, setHeadingLevel] = (0, _element.useState)('heading');
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, {
      title: elements[element].title,
      description: elements[element].description
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
      marginX: 4,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_typographyPreview.default, {
        element: element,
        headingLevel: headingLevel
      })
    }), element === 'heading' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
      marginX: 4,
      marginBottom: "1em",
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToggleGroupControl, {
        label: (0, _i18n.__)('Select heading level'),
        hideLabelFromVision: true,
        value: headingLevel,
        onChange: setHeadingLevel,
        isBlock: true,
        size: "__unstable-large",
        __nextHasNoMarginBottom: true,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
          value: "heading",
          showTooltip: true,
          "aria-label": (0, _i18n.__)('All headings'),
          label: (0, _i18n._x)('All', 'heading levels')
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
          value: "h1",
          showTooltip: true,
          "aria-label": (0, _i18n.__)('Heading 1'),
          label: (0, _i18n.__)('H1')
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
          value: "h2",
          showTooltip: true,
          "aria-label": (0, _i18n.__)('Heading 2'),
          label: (0, _i18n.__)('H2')
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
          value: "h3",
          showTooltip: true,
          "aria-label": (0, _i18n.__)('Heading 3'),
          label: (0, _i18n.__)('H3')
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
          value: "h4",
          showTooltip: true,
          "aria-label": (0, _i18n.__)('Heading 4'),
          label: (0, _i18n.__)('H4')
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
          value: "h5",
          showTooltip: true,
          "aria-label": (0, _i18n.__)('Heading 5'),
          label: (0, _i18n.__)('H5')
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
          value: "h6",
          showTooltip: true,
          "aria-label": (0, _i18n.__)('Heading 6'),
          label: (0, _i18n.__)('H6')
        })]
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typographyPanel.default, {
      element: element,
      headingLevel: headingLevel
    })]
  });
}
var _default = exports.default = ScreenTypographyElement;
//# sourceMappingURL=screen-typography-element.js.map