import {TextProps} from 'react-native';
import {
  CSSPropertyNameList,
  defaultSystemFonts,
} from 'react-native-render-html';
import {iframeModel} from '@native-html/iframe-plugin';
import {DEFAULT_FONT_FAMILY} from '@shared/styles';
import {isIos} from '@shared/utils';

import CustomIframeRenderer from '../CustomIframeRenderer';
import CustomImageRenderer from '../CustomImageRenderer';
import CustomLinkRenderer from '../CustomLinkRenderer';
import CustomVideoRenderer, {VideoModel} from '../CustomVideoRenderer';
import CustomTableRenderer from '../CustomTableRenderer';

export const RENDERERS = {
  iframe: CustomIframeRenderer,
  table: CustomTableRenderer,
  img: CustomImageRenderer,
  a: CustomLinkRenderer,
  video: CustomVideoRenderer,
};

export const CUSTOM_HTML_ELEMENT_MODELS = {
  iframe: iframeModel,
  video: VideoModel,
};

export const IGNORED_STYLES: CSSPropertyNameList = ['textDecorationColor'];

export const SYSTEM_FONTS = [
  ...(defaultSystemFonts || []),
  DEFAULT_FONT_FAMILY,
];

export const DEFAULT_TEXT_PROPS: TextProps = {
  selectable: isIos, // On Android this breaks the UI when textAlign is "justify"
};
