"use strict";

exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeRenderHtml = _interopRequireDefault(require("react-native-render-html"));
var _theme = require("../../variables/theme.native");
var _templateContext = require("../../template/app-review/template-context");
var _index = _interopRequireDefault(require("../text/index.native"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const HtmlBase = props => {
  return /*#__PURE__*/_react.default.createElement(_reactNativeRenderHtml.default, props);
};
const Html = props => {
  const templateContext = (0, _templateContext.useTemplateContext)();
  const [isDisabledBaseFontStyleColor, disableBaseFontStyleColor] = (0, _react.useState)(false);
  const {
    theme
  } = templateContext;
  const {
    children,
    fontSize,
    containerStyle,
    imageStyle,
    style,
    testID,
    anchorTextColor = _theme.HTML_ANCHOR_TEXT_COLOR,
    isTextCentered,
    numberOfLines
  } = props;

  // Don't use StyleSheet there, it's not a react style
  const styles = {
    p: {
      marginVertical: 0,
      textAlign: 'center'
    },
    u: {
      textDecorationLine: 'underline'
    },
    i: {
      fontStyle: 'italic'
    },
    b: {
      fontWeight: theme.fontWeight.bold
    },
    s: {
      textDecorationLine: 'line-through'
    }
  };
  const tagsStyles = {
    ...styles,
    h1: {
      fontSize
    },
    h2: {
      fontSize
    },
    h3: {
      fontSize
    },
    h4: {
      fontSize
    },
    h5: {
      fontSize
    },
    h6: {
      fontSize
    },
    a: {
      color: anchorTextColor
    },
    img: imageStyle || {}
  };
  let baseFontStyle = (0, _react.useMemo)(() => ({
    fontSize,
    color: theme.colors.black
  }), [fontSize, theme]);
  if (style) {
    if (Array.isArray(style)) {
      const styleObject = style.reduce((result, child) => ({
        ...result,
        ...child
      }));
      baseFontStyle = {
        ...baseFontStyle,
        ...styleObject
      };
    } else {
      baseFontStyle = {
        ...baseFontStyle,
        ...style
      };
    }
  }
  const SpanRenderer = (0, _react.useCallback)((htmlAttribs, _children) => /*#__PURE__*/_react.default.createElement(_index.default, {
    numberOfLines: numberOfLines
  }, _children), [numberOfLines]);
  const FontRenderer = (0, _react.useCallback)((htmlAttribs, _children) => {
    if (htmlAttribs.color) {
      disableBaseFontStyleColor(true);
    }
    return /*#__PURE__*/_react.default.createElement(_index.default, {
      key: 1,
      style: {
        ...baseFontStyle,
        color: htmlAttribs.color?.replace(/ /g, '')
      }
    }, _children);
  }, [baseFontStyle]);
  const renderers = {
    font: FontRenderer,
    span: SpanRenderer
  };
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    testID: testID,
    style: containerStyle
  }, /*#__PURE__*/_react.default.createElement(HtmlBase
  // to text-align center on android
  // we have to encapsulate between <p> tag
  // and use custom style define on <p>
  // definition in component style doesn't work
  , {
    source: {
      // eslint-disable-next-line no-nested-ternary
      html: isTextCentered ? `<p>${children}</p>` : numberOfLines ? `<span>${children}</span>` : `${children}`
    },
    tagsStyles: tagsStyles,
    baseFontStyle: {
      ...baseFontStyle,
      color: isDisabledBaseFontStyleColor ? undefined : baseFontStyle.color
    },
    renderers: renderers
    // this is exceptionally for the onboarding course
    // is the only course that has a gif in the context but the img tag
    // comes with width & height attr and these makes this lib do not render the gif
    // so to avoid it, we decided to ignore these attr
    ,
    ignoredStyles: ['width', 'height'],
    testID: "html-base"
  }));
};
var _default = exports.default = Html;
//# sourceMappingURL=index.native.js.map