import React from 'react'
import { StyleSheet } from 'react-native'
import { Linking } from '../../utils/native_adapters'
import { parseSimpleMarkdown } from '../../utils/parse_simple_markdown'
import { Text, TextInlineButton } from '../display'

interface Props {
  text: string
}

export function MessageMarkdown({ text }: Props) {
  if (!text) return null

  // Skip markdown for excessively long messages for performance reasons
  if (text.length > 5000) return <Text>{text}</Text>

  const parsed = parseSimpleMarkdown(text)

  return (
    <Text>
      {parsed.map((part, i) => {
        switch (part.type) {
          case 'bold':
            return (
              <Text key={i} style={styles.bold}>
                {part.content}
              </Text>
            )
          case 'italic':
            return (
              <Text key={i} style={styles.italic}>
                {part.content}
              </Text>
            )
          case 'link':
            return (
              <TextInlineButton
                key={i}
                onPress={() => Linking.openURL(part.content)}
                accessibilityRole="link"
                accessibilityHint="Opens browser"
              >
                {part.content}
              </TextInlineButton>
            )
          default:
            return <Text key={i}>{part.content}</Text>
        }
      })}
    </Text>
  )
}

const styles = StyleSheet.create({
  bold: { fontWeight: 'bold' },
  italic: { fontStyle: 'italic' },
})