import React, {useContext} from 'react';
import {Image, StyleSheet, View} from 'react-native';
import {Text} from 'react-native-animatable';
import {useStore} from 'react-redux';
import {ChatContext} from '../../App';
import {ChatHeaderHeight, normalize, StatusBarHeight} from '../../utils';
import {formatLastSeenText, getMember, isOnline} from '../../utils/messages';

type ChatHeaderProps = {};

const ChatHeader: React.FC<ChatHeaderProps> = () => {
  const {channel} = useContext(ChatContext);
  const state = useStore().getState();
  const member = getMember(channel, state);
  const online = isOnline(member?.user?.last_active);
  const lastSeen = formatLastSeenText(member?.user?.last_active);

  return (
    <View style={styles.container}>
      <View>
        <Image
          style={styles.avatar}
          source={
            member
              ? {uri: member.user?.thumbnail_url}
              : require('../../assets/images/avatar-placeholder.png')
          }
        />
        {online && <View style={styles.online} />}
      </View>
      <View style={styles.content}>
        <Text style={styles.name} numberOfLines={1}>
          {member?.user?.first_name} {member?.user?.last_name}
        </Text>
        <Text style={styles.lastSeen}>{lastSeen}</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    height: ChatHeaderHeight - StatusBarHeight,
    flexDirection: 'row',
    alignItems: 'center',
    paddingLeft: '15%',
  },
  avatar: {
    width: normalize(40),
    height: normalize(40),
    borderRadius: normalize(40) / 2,
  },
  online: {
    position: 'absolute',
    backgroundColor: '#6EE7E7',
    width: normalize(16),
    height: normalize(16),
    borderRadius: normalize(16) / 2,
    borderColor: 'white',
    borderWidth: 3,
    top: 0,
    right: 0,
  },
  content: {
    flex: 1,
    height: '80%',
    justifyContent: 'space-between',
    flexDirection: 'column',
    marginLeft: '5%',
  },
  name: {
    fontWeight: '700',
    fontSize: normalize(15),
    lineHeight: normalize(18),
  },
  lastSeen: {
    color: '#828282',
    fontWeight: '500',
    fontSize: normalize(12),
    lineHeight: normalize(14),
  },
});

export default ChatHeader;