import React, {memo, useMemo} from 'react';
import {TextStyle, TouchableWithoutFeedback} from 'react-native';
import Text, {TextProps} from '@components/Text';
import {BodyAttributes} from '@interfaces/bodyAttributes';
import {useTheme} from '@shared/theme';
import {
  getFullLink,
  getTextSlices,
  openUrlFromApp,
  TextSliceType,
} from '@shared/utils';

import {styles} from './styles';

interface Props extends TextProps {
  isCropped?: boolean;
  value: string;
  onUrlPress?: (link: string) => void;
  onTagPress?: (userId: number) => void;
  attributes?: BodyAttributes[];
  linkStyle?: TextStyle;
}

/**
 * @deprecated Use `_custom/TypographyWithLinks` instead
 */
function TextWithLinks({
  isCropped,
  attributes,
  style,
  linkStyle,
  onTagPress,
  onUrlPress = openUrlFromApp,
  value = '',
  ...props
}: Props) {
  const {theme} = useTheme();
  const linkColorStyle = useMemo(
    () => ({color: theme.primary}),
    [theme.primary],
  );
  const textSlices = useMemo(
    () =>
      getTextSlices({
        rawContent: value,
        tags: attributes,
      }),
    [value, attributes],
  );

  const handleUrlPress = (link: string) => () => {
    const fullUrl = getFullLink(link);
    onUrlPress(fullUrl);
  };

  const handleTagPress = (userId?: number) => () =>
    userId && onTagPress?.(userId);

  const handleMailPress = (mail: string) => () => {
    const mailUrl = `mailto:${mail}`;
    openUrlFromApp(mailUrl, false, true);
  };

  return (
    <Text style={style} {...props}>
      {textSlices.map((textSlice, index) => {
        switch (textSlice.type) {
          case TextSliceType.TAG:
            return (
              <TouchableWithoutFeedback
                key={index}
                onPress={handleTagPress(textSlice.metadata?.userId)}
                style={styles.linkContainer}>
                <Text style={[styles.link, linkColorStyle, style, linkStyle]}>
                  {textSlice.value}
                </Text>
              </TouchableWithoutFeedback>
            );
          case TextSliceType.URL:
            return (
              <TouchableWithoutFeedback
                key={index}
                style={styles.linkContainer}
                onPress={handleUrlPress(textSlice.value)}>
                <Text style={[styles.link, linkColorStyle, style, linkStyle]}>
                  {textSlice.value}
                </Text>
              </TouchableWithoutFeedback>
            );
          case TextSliceType.MAIL:
            return (
              <TouchableWithoutFeedback
                key={index}
                style={styles.linkContainer}
                onPress={handleMailPress(textSlice.value)}>
                <Text style={[styles.link, linkColorStyle, style, linkStyle]}>
                  {textSlice.value}
                </Text>
              </TouchableWithoutFeedback>
            );
          case TextSliceType.TEXT:
          default:
            return `${textSlice.value}`;
        }
      })}
      {isCropped && <Text>...</Text>}
    </Text>
  );
}

/**
 * @deprecated Use `_custom/TypographyWithLinks` instead
 */
export default memo(TextWithLinks);