import React from 'react';
import { I18nManager, StyleSheet, Text, View } from 'react-native';

import Touch from '../../utils/touch';
import { themes } from '../../constants/colors';
import sharedStyles from '../../views/Styles';
import { withTheme } from '../../theme';
import I18n from '../../i18n';
import { Icon } from '.';
import { BASE_HEIGHT, ICON_SIZE, PADDING_HORIZONTAL } from './constants';
import { withDimensions } from '../../dimensions';
import { CustomIcon } from '../../lib/Icons';

const styles = StyleSheet.create({
	container: {
		flex: 1,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
		paddingHorizontal: PADDING_HORIZONTAL,
	},
	leftContainer: {
		paddingRight: PADDING_HORIZONTAL,
	},
	rightContainer: {
		paddingLeft: PADDING_HORIZONTAL,
	},
	disabled: {
		opacity: 0.3,
	},
	textContainer: {
		flex: 1,
		justifyContent: 'center',
	},
	textAlertContainer: {
		flexDirection: 'row',
		alignItems: 'center',
	},
	alertIcon: {
		paddingLeft: 4,
	},
	title: {
		flexShrink: 1,
		fontSize: 16,
		...sharedStyles.textRegular,
	},
	subtitle: {
		fontSize: 14,
		...sharedStyles.textRegular,
	},
	actionIndicator: {
		...I18nManager.isRTL
			? { transform: [{ rotate: '180deg' }] }
			: {},
	},
});

interface IListItemContent {
	title?: string;
	subtitle?: string;
	left?: Function;
	right?: Function;
	disabled?: boolean;
	testID?: string;
	theme: string;
	color?: string;
	translateTitle?: boolean;
	translateSubtitle?: boolean;
	showActionIndicator?: boolean;
	fontScale?: number;
	alert?: boolean;
}

const Content = React.memo(({
	title, subtitle, disabled, testID, left, right, color, theme, fontScale, alert, translateTitle = true, translateSubtitle = true, showActionIndicator = false,
}: IListItemContent) => (
	<View style={[styles.container, disabled && styles.disabled, { height: BASE_HEIGHT * fontScale! }]} testID={testID}>
		{left
			? (
				<View style={styles.leftContainer}>
					{left()}
				</View>
			)
			: null}
		<View style={styles.textContainer}>
			<View style={styles.textAlertContainer}>
				<Text style={[styles.title, { color: color || themes[theme].titleText }]} numberOfLines={1}>{translateTitle ? I18n.t(title) : title}</Text>
				{alert ? (
					<CustomIcon style={[styles.alertIcon, { color: themes[theme].dangerColor }]} size={ICON_SIZE} name='info' />
				) : null}
			</View>
			{subtitle
				? <Text style={[styles.subtitle, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>{translateSubtitle ? I18n.t(subtitle) : subtitle}</Text>
				: null
			}
		</View>
		{right || showActionIndicator
			? (
				<View style={styles.rightContainer}>
					{right ? right() : null}
					{showActionIndicator ? <Icon name='chevron-right' style={styles.actionIndicator} /> : null}
				</View>
			)
			: null}
	</View>
));

interface IListItemButton {
	title?: string;
	onPress: Function;
	disabled?: boolean;
	theme: string;
	backgroundColor: string;
	underlayColor?: string;
}

const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props }: IListItemButton) => (
	<Touch
		onPress={() => onPress(props.title)}
		style={{ backgroundColor: backgroundColor || themes[props.theme].backgroundColor }}
		underlayColor={underlayColor}
		enabled={!props.disabled}
		theme={props.theme}
	>
		<Content {...props} />
	</Touch>
));

interface IListItem {
	onPress: Function;
	theme: string;
	backgroundColor: string;
}

const ListItem = React.memo(({ ...props }: IListItem) => {
	if (props.onPress) {
		return <Button {...props} />;
	}
	return (
		<View style={{ backgroundColor: props.backgroundColor || themes[props.theme].backgroundColor }}>
			<Content {...props} />
		</View>
	);
});

ListItem.displayName = 'List.Item';

export default withTheme(withDimensions(ListItem));