import React, { ComponentType } from 'react';
import { View, TouchableOpacity, StyleSheet, Text, ViewStyle, StyleProp, TextStyle } from 'react-native';

import { useTheme } from './ThemeContext';

type WrapperProps = {
  readonly onPress?: () => void;
  readonly style?: StyleProp<ViewStyle>;
  readonly children: React.ReactNode;
};

const Wrapper: ComponentType<WrapperProps> = ({ onPress, style, children }: WrapperProps) => {
  if (onPress === undefined) {
    return <View style={style}>{children}</View>;
  }
  return (
    <TouchableOpacity onPress={onPress} style={style}>
      {children}
    </TouchableOpacity>
  );
};
export type Props = {
  readonly title?: string;
  readonly titleElement?: React.ReactElement;
  readonly subtitle?: string;
  readonly subtitleElement?: React.ReactElement;
  readonly onPress?: () => void;
  readonly leftElement?: React.ReactElement;
  readonly rightElement?: React.ReactElement;
  readonly wrapperStyle?: StyleProp<ViewStyle>;
  readonly titleStyle?: StyleProp<TextStyle>;
  readonly subtitleStyle?: StyleProp<TextStyle>;
  readonly testID?: string;
};

const emptyStyle = {};

type TitleComponentProps = {
  titleElement?: React.ReactElement;
  title?: string;
  titleStyle?: StyleProp<TextStyle>;
};
const TitleComponent: ComponentType<TitleComponentProps> | null = ({
  titleElement,
  title,
  titleStyle,
}: TitleComponentProps) => {
  const theme = useTheme();

  if (titleElement === undefined && title !== undefined) {
    return (
      <Text style={StyleSheet.flatten([theme.listItem.title, titleStyle === undefined ? emptyStyle : titleStyle])}>
        {title}
      </Text>
    );
  }
  if (titleElement !== undefined) {
    return titleElement;
  }

  return null;
};

type SubTitleComponentProps = {
  subtitleElement?: React.ReactElement;
  subtitle?: string;
  subtitleStyle?: StyleProp<TextStyle>;
};

const SubTitleComponent: ComponentType<SubTitleComponentProps> | null = ({
  subtitleElement,
  subtitle,
  subtitleStyle,
}: SubTitleComponentProps) => {
  const theme = useTheme();

  if (subtitleElement === undefined && subtitle !== undefined) {
    return (
      <Text
        style={StyleSheet.flatten([theme.listItem.subtitle, subtitleStyle === undefined ? emptyStyle : subtitleStyle])}
      >
        {subtitle}
      </Text>
    );
  } else if (subtitleElement !== undefined) {
    return subtitleElement;
  }

  return null;
};
const ListItem: ComponentType<Props> = ({
  title,
  titleElement,
  subtitle,
  subtitleElement,
  onPress,
  leftElement,
  rightElement,
  wrapperStyle,
  titleStyle,
  subtitleStyle,
  testID,
}: Props) => {
  const theme = useTheme();

  return (
    <Wrapper
      style={StyleSheet.flatten([theme.listItem.wrapper, wrapperStyle === undefined ? emptyStyle : wrapperStyle])}
      onPress={onPress}
    >
      <View testID={testID} style={theme.listItem.contentWrapper}>
        {leftElement !== undefined ? leftElement : null}
        <View style={theme.listItem.textWrapper}>
          <View>
            <TitleComponent titleElement={titleElement} title={title} titleStyle={titleStyle} />
            <SubTitleComponent subtitleElement={subtitleElement} subtitle={subtitle} subtitleStyle={subtitleStyle} />
          </View>
        </View>
      </View>
      {rightElement !== undefined ? rightElement : null}
    </Wrapper>
  );
};

export default ListItem;