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

import Touchable from 'react-native-platform-touchable';
import { themes } from '../../constants/colors';
import Button from '../../containers/Button';
import I18n from '../../i18n';
import styles from './styles';

const CannedResponseItem = ({ theme, onPressDetail, shortcut, scope, onPressUse, text, tags }) => (
	<Touchable onPress={onPressDetail} style={[styles.wrapCannedItem, { backgroundColor: themes[theme].messageboxBackground }]}>
		<>
			<View style={styles.cannedRow}>
				<View style={styles.cannedWrapShortcutScope}>
					<Text style={[styles.cannedShortcut, { color: themes[theme].titleText }]}>!{shortcut}</Text>
					<Text style={[styles.cannedScope, { color: themes[theme].auxiliaryTintColor }]}>{scope}</Text>
				</View>

				<Button
					title={I18n.t('Use')}
					fontSize={12}
					color={themes[theme].titleText}
					style={[styles.cannedUseButton, { backgroundColor: themes[theme].chatComponentBackground }]}
					theme={theme}
					onPress={onPressUse}
				/>
			</View>

			<Text ellipsizeMode='tail' numberOfLines={2} style={[styles.cannedText, { color: themes[theme].auxiliaryTintColor }]}>
				“{text}”
			</Text>
			<View style={styles.cannedTagContainer}>
				{tags?.length > 0
					? tags.map(t => (
							<View style={[styles.cannedTagWrap, { backgroundColor: themes[theme].searchboxBackground }]}>
								<Text style={[styles.cannedTag, { color: themes[theme].auxiliaryTintColor }]}>{t}</Text>
							</View>
					  ))
					: null}
			</View>
		</>
	</Touchable>
);

CannedResponseItem.propTypes = {
	theme: PropTypes.string,
	onPressDetail: PropTypes.func,
	shortcut: PropTypes.string,
	scope: PropTypes.string,
	onPressUse: PropTypes.func,
	text: PropTypes.string,
	tags: PropTypes.array
};

CannedResponseItem.defaultProps = {
	onPressDetail: () => {},
	onPressUse: () => {}
};

export default CannedResponseItem;