import {useNavigation} from '@react-navigation/core';
import React, {useContext} from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
import {TouchableOpacity} from 'react-native-gesture-handler';
import {useStore} from 'react-redux';
import {ChannelPreviewMessengerProps} from 'stream-chat-react-native';
import {ChatContext} from '../../App';
import {TAGG_LIGHT_BLUE_2} from '../../constants';
import {
  LocalAttachmentType,
  LocalChannelType,
  LocalCommandType,
  LocalEventType,
  LocalMessageType,
  LocalReactionType,
  LocalUserType,
} from '../../types';
import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
import {getMember, isOnline} from '../../utils/messages';

const ChannelPreview: React.FC<
  ChannelPreviewMessengerProps<
    LocalAttachmentType,
    LocalChannelType,
    LocalCommandType,
    LocalEventType,
    LocalMessageType,
    LocalReactionType,
    LocalUserType
  >
> = (props) => {
  const {channel} = props;
  const {setChannel} = useContext(ChatContext);
  const state = useStore().getState();
  const navigation = useNavigation();
  const member = getMember(channel, state);
  const online = isOnline(member?.user?.last_active);
  const unread = channel.state.unreadCount > 0;

  return (
    <TouchableOpacity
      style={styles.container}
      onPress={() => {
        setChannel(channel);
        navigation.navigate('Chat');
      }}>
      <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, unread ? styles.unread : {}]}
          numberOfLines={1}>
          {member?.user?.first_name} {member?.user?.last_name}
        </Text>
        <Text
          style={[styles.lastMessage, unread ? styles.unread : {}]}
          numberOfLines={1}>
          {channel.state.messages.length > 0
            ? channel.state.messages[channel.state.messages.length - 1].text
            : ''}
        </Text>
      </View>
      {unread && <View style={styles.purpleDot} />}
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    height: Math.round(SCREEN_HEIGHT / 9),
    width: Math.round(SCREEN_WIDTH * 0.85),
    alignSelf: 'center',
    alignItems: 'center',
  },
  avatar: {
    width: normalize(60),
    height: normalize(60),
    borderRadius: normalize(62) / 2,
  },
  online: {
    position: 'absolute',
    backgroundColor: TAGG_LIGHT_BLUE_2,
    width: normalize(18),
    height: normalize(18),
    borderRadius: normalize(18) / 2,
    borderColor: 'white',
    borderWidth: 2,
    bottom: 0,
    right: 0,
  },
  content: {
    flex: 1,
    height: '60%',
    flexDirection: 'column',
    marginLeft: '5%',
  },
  name: {
    fontWeight: '500',
    fontSize: normalize(14),
    lineHeight: normalize(17),
  },
  lastMessage: {
    color: '#828282',
    fontWeight: '500',
    fontSize: normalize(12),
    lineHeight: normalize(14),
    paddingTop: '5%',
  },
  unread: {
    fontWeight: '700',
    color: 'black',
  },
  purpleDot: {
    backgroundColor: '#8F01FF',
    width: normalize(10),
    height: normalize(10),
    borderRadius: normalize(10) / 2,
    marginLeft: '5%',
  },
});

export default ChannelPreview;