import React, {memo} from 'react';
import {ViewStyle, StyleProp} from 'react-native';
import {ZoomView} from '@components/_core/ZoomView';
import {useTheme} from '@shared/theme';

import {
  HtmlRenderContent,
  HtmlRenderProps,
} from './components/HtmlRenderContent';

interface Props extends HtmlRenderProps {
  withZoom?: boolean;
  backgroundColor?: string;
  containerStyle?: StyleProp<ViewStyle>;
}

// Possible library to use: https://github.com/native-html/core

function HtmlRenderComponent({
  withZoom,
  containerStyle,
  backgroundColor,
  ...props
}: Props) {
  const {theme} = useTheme();

  return withZoom ? (
    <ZoomView
      doubleTapZoom={false}
      style={[
        {backgroundColor: backgroundColor || theme.background.elements.default},
        containerStyle,
      ]}>
      <HtmlRenderContent {...props} />
    </ZoomView>
  ) : (
    <HtmlRenderContent {...props} />
  );
}

export * from './utils';

export const HtmlRender = memo(HtmlRenderComponent);