import React from 'react';
import { View, Text } from 'react-native';
import Touchable from 'react-native-platform-touchable';
import { TSupportedThemes } from '../../theme';
import { themes } from '../../lib/constants';
import Button from '../../containers/Button';
import I18n from '../../i18n';
import styles from './styles';
interface ICannedResponseItem {
theme: TSupportedThemes;
onPressDetail: () => void;
shortcut: string;
scope: string;
onPressUse: () => void;
text: string;
tags?: string[];
}
const CannedResponseItem = ({
theme,
onPressDetail = () => {},
shortcut,
scope,
onPressUse = () => {},
text,
tags = []
}: ICannedResponseItem): JSX.Element => (
<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 }]}
onPress={onPressUse}
/>
<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>
))
: null}
</>
</Touchable>
);
export default CannedResponseItem;