import { Card, Divider, Text, TouchableRipple } from 'react-native-paper';
import React from 'react';
import {  StyleSheet,  View,  ViewStyle,} from 'react-native';
import { AvatarPresenceBadge } from '../presence';
import { Strings } from '../../resources/localization/Strings';
import { IContact, Presence } from '../../store/contacts/types';
import { ImageButton } from '../common/ImageButton';
import { IStyledProps } from '../common/types';

interface IProps extends IStyledProps<IContactItemStyleProps> {
  contact: IContact;
  onClickItem: (contact: IContact) => void;
  onCallPress?: (contact: IContact) => void;
  onChatPress?: (contact: IContact) => void;
}
export interface IContactItemStyleProps {
  card?: ViewStyle;
  container?:ViewStyle;
  row?:ViewStyle;
  contactInfo?:ViewStyle;
  cardAction?:ViewStyle;
  divider?:ViewStyle;
}
export const ContactItemView: React.FunctionComponent<IProps> = ({
  contact,
  style,
  onClickItem,
  onCallPress,
  onChatPress,
}) => {
  const mergedStyle = { ...defaultStyle, ...style };
  const contactPresence = contact.presence as keyof typeof Presence;

  const onPressItem = () => {
    onClickItem(contact);
  };
  return (
    <Card style={mergedStyle.card}>
    <TouchableRipple onPress={onPressItem} rippleColor="rgba(0, 0, 0, .1)">
      <View>
        <View style={mergedStyle.container}>
          <View style={mergedStyle.row}>
            <AvatarPresenceBadge peer={contact} presence={contact.isRoster ? contact.presence : Presence.offline} />
            <View style={mergedStyle.contactInfo}>
              <Text variant="bodyMedium">{contact.name}</Text>
              {contact.isOffice365 && <Text variant="bodySmall">{contact.jobTitle}</Text>}
              {contact.isPhoneBook && <Text variant="bodySmall">{contact.firstAvailableNumber}</Text>}
              {contact.isRoster && <Text variant="bodySmall">{Strings[contactPresence]}</Text>}
            </View>
          </View>
          {onCallPress && (
            <ImageButton
              imageSource={require('../../resources/images/callPhone.png')}
              onPress={() => onCallPress(contact)}
            />
          )}
          {/* {onChatPress && (
            <ImageButton
              imageSource={require('../../resources/images/chat.png')}
              onPress={() => onChatPress(contact)}
            />
          )} */}
        </View>
        <Divider style={mergedStyle.divider} />
      </View>
    </TouchableRipple>
  </Card>
  )
};
const defaultStyle: IContactItemStyleProps = StyleSheet.create({

  card: {
    borderWidth: 0,
    paddingVertical: 8,
    paddingHorizontal: 16,
  },
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 16,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  contactInfo: {
    marginLeft: 16,
  },
  actions: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  divider: {
    backgroundColor: '#E0E0E0',
    marginHorizontal: 16,
    height: 1,
  },
});