"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _utils = require("./utils");
var _context = require("./context");
var _fontDemo = _interopRequireDefault(require("./font-demo"));
var _lockUnlock = require("../../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  kebabCase
} = (0, _lockUnlock.unlock)(_components.privateApis);
function LibraryFontVariant({
  face,
  font
}) {
  const {
    isFontActivated,
    toggleActivateFont
  } = (0, _element.useContext)(_context.FontLibraryContext);
  const isInstalled = font?.fontFace?.length > 0 ? isFontActivated(font.slug, face.fontStyle, face.fontWeight, font.source) : isFontActivated(font.slug, null, null, font.source);
  const handleToggleActivation = () => {
    if (font?.fontFace?.length > 0) {
      toggleActivateFont(font, face);
      return;
    }
    toggleActivateFont(font);
  };
  const displayName = font.name + ' ' + (0, _utils.getFontFaceVariantName)(face);
  const checkboxId = kebabCase(`${font.slug}-${(0, _utils.getFontFaceVariantName)(face)}`);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: "font-library-modal__font-card",
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Flex, {
      justify: "flex-start",
      align: "center",
      gap: "1rem",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
        checked: isInstalled,
        onChange: handleToggleActivation,
        __nextHasNoMarginBottom: true,
        id: checkboxId
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
        htmlFor: checkboxId,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontDemo.default, {
          font: face,
          text: displayName,
          onClick: handleToggleActivation
        })
      })]
    })
  });
}
var _default = exports.default = LibraryFontVariant;
//# sourceMappingURL=library-font-variant.js.map