import React, { useCallback, useMemo, useState } from 'react';
import { View } from 'react-native';
import RenderHTML from 'react-native-render-html';
import { HTML_ANCHOR_TEXT_COLOR } from '../../variables/theme.native';
import { useTemplateContext } from '../../template/app-review/template-context';
import Text from '../text/index.native';
const HtmlBase = props => {
  return /*#__PURE__*/React.createElement(RenderHTML, props);
};
const Html = props => {
  const templateContext = useTemplateContext();
  const [isDisabledBaseFontStyleColor, disableBaseFontStyleColor] = useState(false);
  const {
    theme
  } = templateContext;
  const {
    children,
    fontSize,
    containerStyle,
    imageStyle,
    style,
    testID,
    anchorTextColor = 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 = 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 = useCallback((htmlAttribs, _children) => /*#__PURE__*/React.createElement(Text, {
    numberOfLines: numberOfLines
  }, _children), [numberOfLines]);
  const FontRenderer = useCallback((htmlAttribs, _children) => {
    if (htmlAttribs.color) {
      disableBaseFontStyleColor(true);
    }
    return /*#__PURE__*/React.createElement(Text, {
      key: 1,
      style: {
        ...baseFontStyle,
        color: htmlAttribs.color?.replace(/ /g, '')
      }
    }, _children);
  }, [baseFontStyle]);
  const renderers = {
    font: FontRenderer,
    span: SpanRenderer
  };
  return /*#__PURE__*/React.createElement(View, {
    testID: testID,
    style: containerStyle
  }, /*#__PURE__*/React.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"
  }));
};
export default Html;
//# sourceMappingURL=index.native.js.map