import React from 'react';
import {ScrollView, View} from 'react-native';
import {Typography} from '@components/_core/Typography';
import {useTheme} from '@shared/theme';

import {styles, TABLE_CELL_MIN_WIDTH} from '../../styles';
import {InlineText} from '../InlineText';

import type {MarkdownBlock} from '../../interfaces';

interface Props {
  block: MarkdownBlock;
  availableWidth: number;
}

export function MarkdownBlockView({block, availableWidth}: Props) {
  const {theme} = useTheme();

  switch (block.type) {
    case 'h1':
      return (
        <Typography variant="xl" weight="semiBold" style={styles.h1}>
          {block.text}
        </Typography>
      );
    case 'h2':
      return (
        <Typography variant="l" weight="semiBold" style={styles.h2}>
          {block.text}
        </Typography>
      );
    case 'h3':
      return (
        <Typography variant="m" weight="semiBold" style={styles.h3}>
          {block.text}
        </Typography>
      );
    case 'hr':
      return (
        <View
          style={[styles.hr, {backgroundColor: theme.border.neutral.default}]}
        />
      );
    case 'li':
      return (
        <View style={styles.listItem}>
          <Typography variant="xs" style={styles.bullet}>
            {block.ordered ? `${block.index}.` : '•'}
          </Typography>
          <View style={styles.listItemContent}>
            <InlineText text={block.text} color={theme.text.neutral.default} />
          </View>
        </View>
      );
    case 'table': {
      const columnCount = Math.max(
        block.headers.length,
        ...block.rows.map(r => r.length),
        1,
      );
      const evenWidth = availableWidth / columnCount;
      const overflows = evenWidth < TABLE_CELL_MIN_WIDTH;
      const cellWidth = overflows
        ? TABLE_CELL_MIN_WIDTH
        : Math.floor(evenWidth);
      const cellStyle = [styles.tableCell, {width: cellWidth}];

      const tableContent = (
        <View
          style={[
            styles.table,
            !overflows && styles.tableFullWidth,
            {borderColor: theme.border.neutral.default},
          ]}>
          <View
            style={[
              styles.tableRow,
              {
                backgroundColor: theme.background.layout.tertiary,
                borderBottomColor: theme.border.neutral.default,
              },
            ]}>
            {block.headers.map((header, hi) => (
              <View key={hi} style={cellStyle}>
                <InlineText
                  text={header}
                  weight="semiBold"
                  color={theme.text.neutral.default}
                />
              </View>
            ))}
          </View>
          {block.rows.map((row, ri) => (
            <View
              key={ri}
              style={[
                styles.tableRow,
                ri < block.rows.length - 1 && styles.tableRowBorder,
                ri < block.rows.length - 1 && {
                  borderBottomColor: theme.border.neutral.default,
                },
              ]}>
              {row.map((cell, ci) => (
                <View key={ci} style={cellStyle}>
                  <InlineText text={cell} color={theme.text.neutral.default} />
                </View>
              ))}
            </View>
          ))}
        </View>
      );

      if (!overflows) {
        return <View style={styles.tableWrapper}>{tableContent}</View>;
      }
      return (
        <ScrollView
          horizontal
          showsHorizontalScrollIndicator
          style={styles.tableWrapper}>
          {tableContent}
        </ScrollView>
      );
    }
    case 'paragraph':
      return (
        <View style={styles.paragraph}>
          <InlineText text={block.text} color={theme.text.neutral.default} />
        </View>
      );
    default:
      return null;
  }
}
