import React, { FunctionComponent } from 'react';
import { StyleSheet, Text, View, ViewStyle } from 'react-native';
import { Strings } from '../../resources/localization/Strings';
import { IContact, Presence } from '../../store/contacts/types';
import { AvatarPresenceBadge } from '../presence/AvatarPresenceBadge';
import { Divider,TouchableRipple } from 'react-native-paper';
interface IProps {
  contact: IContact;
  rightItem?: React.ReactNode;
  leftItems?: React.ReactNode;
  onPressed?: (contact: IContact) => void;
  style?: ViewStyle

}
export const ContactCardView: FunctionComponent<IProps> = ({ contact, rightItem,leftItems, onPressed, style }) => {
  const contactPresence = contact.presence as keyof typeof Presence;
  const createActionHandler = () => {
    if (onPressed) {
      onPressed(contact);
    }
  }
  const renderLeftItems = () => {
    if (leftItems) {
      return leftItems;
    } else {
      return (
        <>
          <AvatarPresenceBadge peer={contact} presence={contact.presence} />
          <View style={styles.leftItemTextContainer}>
            <Text>{contact.name}</Text>
            <Text style={styles.presenceText}>{Strings[contactPresence]}</Text>
          </View>
        </>
      );
    }
  }
  return (
    <View style={[styles.container, style]}>
    <TouchableRipple onPress={createActionHandler} style={styles.pressable}>
      <View style={styles.row}>
        <View style={styles.leftItemsContainer}>
        {renderLeftItems()}

        </View>
        <View style={styles.rightItemsContainer}>
          {rightItem}
        </View>
     
      </View>
    </TouchableRipple>
    <Divider style={styles.divider} />

  </View>
  )
}
const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 16,
    paddingVertical: 8,
  },
  pressable: {
    overflow: 'hidden',
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  leftItemsContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  rightItemsContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  leftItemTextContainer: {
    marginLeft: 16,
  },
  presenceText: {
    fontSize: 12,
  },
  divider: {
    marginTop: 8,
    backgroundColor: '#e0e0e0',
    height: 1,
  },
});