"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _context = require("./context");
var _previewStyles = require("./utils/preview-styles");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function getPreviewUrl(fontFace) {
  if (fontFace.preview) {
    return fontFace.preview;
  }
  if (fontFace.src) {
    return Array.isArray(fontFace.src) ? fontFace.src[0] : fontFace.src;
  }
}
function getDisplayFontFace(font) {
  // if this IS a font face return it
  if (font.fontStyle || font.fontWeight) {
    return font;
  }
  // if this is a font family with a collection of font faces
  // return the first one that is normal and 400 OR just the first one
  if (font.fontFace && font.fontFace.length) {
    return font.fontFace.find(face => face.fontStyle === 'normal' && face.fontWeight === '400') || font.fontFace[0];
  }
  // This must be a font family with no font faces
  // return a fake font face
  return {
    fontStyle: 'normal',
    fontWeight: '400',
    fontFamily: font.fontFamily,
    fake: true
  };
}
function FontDemo({
  font,
  text
}) {
  const ref = (0, _element.useRef)(null);
  const fontFace = getDisplayFontFace(font);
  const style = (0, _previewStyles.getFamilyPreviewStyle)(font);
  text = text || font.name;
  const customPreviewUrl = font.preview;
  const [isIntersecting, setIsIntersecting] = (0, _element.useState)(false);
  const [isAssetLoaded, setIsAssetLoaded] = (0, _element.useState)(false);
  const {
    loadFontFaceAsset
  } = (0, _element.useContext)(_context.FontLibraryContext);
  const previewUrl = customPreviewUrl !== null && customPreviewUrl !== void 0 ? customPreviewUrl : getPreviewUrl(fontFace);
  const isPreviewImage = previewUrl && previewUrl.match(/\.(png|jpg|jpeg|gif|svg)$/i);
  const faceStyles = (0, _previewStyles.getFacePreviewStyle)(fontFace);
  const textDemoStyle = {
    fontSize: '18px',
    lineHeight: 1,
    opacity: isAssetLoaded ? '1' : '0',
    ...style,
    ...faceStyles
  };
  (0, _element.useEffect)(() => {
    const observer = new window.IntersectionObserver(([entry]) => {
      setIsIntersecting(entry.isIntersecting);
    }, {});
    observer.observe(ref.current);
    return () => observer.disconnect();
  }, [ref]);
  (0, _element.useEffect)(() => {
    const loadAsset = async () => {
      if (isIntersecting) {
        if (!isPreviewImage && fontFace.src) {
          await loadFontFaceAsset(fontFace);
        }
        setIsAssetLoaded(true);
      }
    };
    loadAsset();
  }, [fontFace, isIntersecting, loadFontFaceAsset, isPreviewImage]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    ref: ref,
    children: isPreviewImage ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
      src: previewUrl,
      loading: "lazy",
      alt: text,
      className: "font-library-modal__font-variant_demo-image"
    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
      style: textDemoStyle,
      className: "font-library-modal__font-variant_demo-text",
      children: text
    })
  });
}
var _default = exports.default = FontDemo;
//# sourceMappingURL=font-demo.js.map