import { FC } from 'react';
import { Text } from 'components/text';
import { Maybe, RichTextContentStringStyle } from 'expo-schema';
import { RichTextContentProps } from './MessageContent.web';

export const MessageContent: FC<RichTextContentProps> = ({ richTextContent }) => {
  const { strings } = richTextContent;

  const getTextDecoration = (style: Maybe<RichTextContentStringStyle> | undefined) => {
    const isUnderLine = style?.underline ? 'underline' : 'none';
    return style?.strikethrough ? 'line-through' : isUnderLine;
  };

  return (
    <>
      {strings.map(({ id, style, value }) => {
        return (
          <Text
            key={id}
            variant="body"
            backgroundColor={style?.codeStyle ? 'base-01' : 'transparent'}
            fontStyle={style?.italics ? 'italic' : 'normal'}
            fontWeight={style?.bold ? 'bold' : 'normal'}
            style={{
              textDecorationLine: getTextDecoration(style),
            }}
          >
            {value}
          </Text>
        );
      })}
    </>
  );
};