import {useNavigation} from '@react-navigation/native';
import React, {useEffect, useState} from 'react';
import {
  ActivityIndicatorBase,
  Alert,
  Image,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
import {useDispatch, useSelector, useStore} from 'react-redux';
import {MomentCommentsScreen} from '../../screens';
import {loadAvatar} from '../../services';
import {
  EMPTY_MOMENTS_LIST,
  EMPTY_MOMENT_CATEGORIES,
} from '../../store/initialStates';
import {userSocialsReducer} from '../../store/reducers';
import {RootState} from '../../store/rootReducer';
import {NotificationType, ScreenType} from '../../types';
import {
  fetchUserX,
  SCREEN_HEIGHT,
  SCREEN_WIDTH,
  userXInStore,
} from '../../utils';

interface NotificationProps {
  item: NotificationType;
  userXId: string | undefined;
  screenType: ScreenType;
}

const Notification: React.FC<NotificationProps> = (props) => {
  const {
    item: {
      actor: {id, username, first_name, last_name},
      verbage,
      notification_type,
      notification_object,
      unread,
    },
    userXId,
    screenType,
  } = props;
  const navigation = useNavigation();
  const state: RootState = useStore().getState();
  const dispatch = useDispatch();
  const {moments: loggedInUserMoments} =
    notification_type === 'CMT'
      ? useSelector((state: RootState) => state.moments)
      : {moments: undefined};

  const [avatarURI, setAvatarURI] = useState<string | undefined>(undefined);
  const [momentURI, setMomentURI] = useState<string | undefined>(undefined);
  const backgroundColor = unread ? '#DCF1F1' : 'rgba(0,0,0,0)';

  useEffect(() => {
    let mounted = true;
    const loadAvatarImage = async (user_id: string) => {
      const response = await loadAvatar(user_id, true);
      if (mounted) {
        setAvatarURI(response);
      }
    };
    loadAvatarImage(id);
    return () => {
      mounted = false;
    };
  }, [id]);

  // TODO: this should be moment thumbnail, waiting for that to complete
  // useEffect(() => {
  //   let mounted = true;
  //   const loadMomentImage = async (user_id: string) => {
  //     const response = await loadAvatar(user_id, true);
  //     if (mounted) {
  //       setMomentURI(response);
  //     }
  //   };
  //   loadMomentImage(id);
  //   return () => {
  //     mounted = false;
  //   };
  // }, [id, notification_object]);

  const onNotificationTap = async () => {
    switch (notification_type) {
      case 'FRD':
        if (!userXInStore(state, screenType, id)) {
          await fetchUserX(
            dispatch,
            {userId: id, username: username},
            screenType,
          );
        }
        navigation.push('Profile', {
          userXId: id,
          screenType,
        });
        break;
      case 'CMT':
        // find the moment we need to display
        const moment = loggedInUserMoments?.find(
          (m) => m.moment_id === notification_object?.moment_id,
        );
        if (moment) {
          navigation.push('IndividualMoment', {
            moment,
            userXId,
            screenType,
          });
          setTimeout(() => {
            navigation.push('MomentCommentsScreen', {
              moment_id: moment.moment_id,
              screenType,
            });
          }, 500);
        }
        break;
      default:
        break;
    }
  };

  return (
    <TouchableWithoutFeedback
      style={[styles.container, {backgroundColor}]}
      onPress={onNotificationTap}>
      <View style={styles.avatarContainer}>
        <Image
          style={styles.avatar}
          source={
            avatarURI
              ? {uri: avatarURI, cache: 'only-if-cached'}
              : require('../../assets/images/avatar-placeholder.png')
          }
        />
      </View>
      <View style={styles.contentContainer}>
        <Text style={styles.actorName}>
          {first_name} {last_name}
        </Text>
        <Text>{verbage}</Text>
      </View>
      {/* TODO: Still WIP */}
      {/* {notification_type === 'CMT' && notification_object && (
        <Image
          style={styles.moment}
          source={{uri: momentURI, cache: 'only-if-cached'}}
        />
      )} */}
    </TouchableWithoutFeedback>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    height: SCREEN_HEIGHT / 10,
    flex: 1,
    alignItems: 'center',
  },
  avatarContainer: {
    marginLeft: '5%',
    flex: 1,
    justifyContent: 'center',
  },
  avatar: {
    height: 42,
    width: 42,
    borderRadius: 20,
  },
  contentContainer: {
    flex: 5,
    marginLeft: '5%',
    height: '80%',
    flexDirection: 'column',
    justifyContent: 'space-around',
    marginRight: SCREEN_WIDTH / 6,
  },
  actorName: {
    fontSize: 15,
    fontWeight: '700',
  },
  moment: {
    position: 'absolute',
    height: 42,
    width: 42,
    right: '5%',
  },
});

export default Notification;