import { FunctionComponent } from 'react';
import React from 'react';
import { IInvitation } from '../../store/invitations/types';
import { ImageButton } from '../common/ImageButton';
import { AvatarPresenceBadge } from '../presence/AvatarPresenceBadge';
import { Divider, Surface } from 'react-native-paper';
import { StyleSheet, Text, View } from 'react-native';
import { Presence } from '../../store/contacts/types';

interface IProps {
  invitation: IInvitation;
  onAccept?: (invitation: IInvitation) => void;
  onDecline?: (invitation: IInvitation) => void;
  onCancel?: (invitation: IInvitation) => void;
  onResend?: (invitation: IInvitation) => void;
}
export const InvitationCardView: FunctionComponent<IProps> = ({ invitation, onAccept, onDecline, onCancel, onResend }) => {
  return (
    <Surface style={styles.invitationContainer}>
      <View style={styles.mainContainer}>
        <View style={styles.leftContainer}>
          <AvatarPresenceBadge peer={invitation.contact} presence={Presence.offline} />
          <Text>{invitation.contact.name}</Text>
        </View>
        <View style={styles.actionsContainer}>
          {onAccept && (
            <ImageButton
              imageSource={require('../../resources/images/acceptFeed.png')}
              onPress={() => onAccept(invitation)}
            />
          )}
          {onDecline && (
            <ImageButton
              imageSource={require('../../resources/images/removeFeed.png')}
              onPress={() => onDecline(invitation)}
            />
          )}
          {onCancel && (
            <ImageButton
              imageSource={require('../../resources/images/cancel.png')}
              onPress={() => onCancel(invitation)}
            />
          )}
          {onResend && (
            <ImageButton
              imageSource={require('../../resources/images/resend.png')}
              onPress={() => onResend(invitation)}
            />
          )}
        </View>
      </View>
      <Divider style={styles.divider} />
    </Surface>
  );
}
const styles = StyleSheet.create({
  invitationContainer: {
    elevation: 1, 
    paddingVertical: 8,
    paddingLeft: 16,
    paddingRight: 20,
    borderRadius: 4,
    backgroundColor: 'white',
  },
  mainContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
  },
  leftContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  actionsContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  divider: {
    marginHorizontal: 20,
    marginVertical: 8,
    backgroundColor: '#E0E0E0',
    height: 1,
  },
});