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

import { themes } from '../../constants/colors';
import { CustomIcon } from '../../lib/Icons';
import { Button } from './Button';
import styles from './styles';

interface IActionSheetItem {
	item: {
		title: string;
		icon: string;
		danger: boolean;
		testID: string;
		onPress(): void;
		right: Function;
	};
	theme: string
	hide(): void;
}

export const Item = React.memo(({ item, hide, theme }: IActionSheetItem) => {
	const onPress = () => {
		hide();
		item?.onPress();
	};

	return (
		<Button
			onPress={onPress}
			style={[styles.item, { backgroundColor: themes[theme].focusedBackground }]}
			theme={theme}
			testID={item.testID}
		>
			<CustomIcon name={item.icon} size={20} color={item.danger ? themes[theme].dangerColor : themes[theme].bodyText} />
			<View style={styles.titleContainer}>
				<Text
					numberOfLines={1}
					style={[styles.title, { color: item.danger ? themes[theme].dangerColor : themes[theme].bodyText }]}
				>
					{item.title}
				</Text>
			</View>
			{ item.right ? (
				<View style={styles.rightContainer}>
					{item.right ? item.right() : null}
				</View>
			) : null }
		</Button>
	);
});