import {useNavigation} from '@react-navigation/core';
import React, {FC, useEffect, useState} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
import {useSelector} from 'react-redux';
import {BadgeIcon} from '..';
import PlusIconImage from '../../assets/icons/plus-icon-thin.svg';
import {BADGE_LIMIT} from '../../constants';
import {RootState} from '../../store/rootReducer';
import {ScreenType, UniversityBadgeDisplayType} from '../../types';
import {badgesToDisplayBadges, normalize} from '../../utils';
import BadgeDetailView from '../common/BadgeDetailView';

interface ProfileBadgesProps {
  userXId: string | undefined;
  screenType: ScreenType;
}

const ProfileBadges: React.FC<ProfileBadgesProps> = ({userXId, screenType}) => {
  const navigation = useNavigation();
  const {badges, name, university} = useSelector((state: RootState) =>
    userXId ? state.userX[screenType][userXId].profile : state.user.profile,
  );
  const [displayBadges, setDisplayBadges] = useState<
    UniversityBadgeDisplayType[]
  >([]);
  const [isEditBadgeModalVisible, setIsEditBadgeModalVisible] = useState(false);
  const isOwnProfile = userXId === undefined;

  useEffect(() => {
    setDisplayBadges(badgesToDisplayBadges(badges, university));
  }, [badges]);

  const PlusIcon: FC = () => (
    <TouchableOpacity
      onPress={() => navigation.navigate('BadgeSelection', {editing: true})}>
      <PlusIconImage style={styles.plus} />
    </TouchableOpacity>
  );

  const CloseIcon: FC = () => (
    <TouchableOpacity onPress={() => setIsEditBadgeModalVisible(true)}>
      <PlusIconImage style={styles.close} />
    </TouchableOpacity>
  );

  return (
    <>
      {/* Tutorial text */}
      {displayBadges.length === 0 && isOwnProfile && (
        <>
          <Text style={styles.title}>Badges</Text>
          <Text style={styles.body}>
            Proudly represent your team, club, or organization!
          </Text>
        </>
      )}
      {displayBadges.length === 0 && isOwnProfile && (
        // Grey circle placeholders
        <ScrollView
          contentContainerStyle={styles.badgeContainer}
          scrollEnabled={false}
          horizontal>
          <PlusIcon />
          {Array(BADGE_LIMIT)
            .fill(0)
            .map((_item, index) => (
              <View key={index} style={[styles.grey, styles.circle]} />
            ))}
        </ScrollView>
      )}
      {displayBadges.length !== 0 && (
        // Populating actual badges
        <ScrollView
          contentContainerStyle={styles.badgeContainer}
          scrollEnabled={false}
          horizontal>
          {/* Actual badges */}
          {displayBadges.map((displayBadge) => (
            <BadgeIcon key={displayBadge.id} badge={displayBadge} />
          ))}
          {/* Plus icon */}
          {displayBadges.length < BADGE_LIMIT && isOwnProfile && <PlusIcon />}
          {/* Empty placeholders for space-between styling */}
          {Array(BADGE_LIMIT + 1)
            .fill(0)
            .splice(displayBadges.length + 1, BADGE_LIMIT)
            .map((_item, index) => (
              <View key={index} style={styles.circle} />
            ))}
          {/* X button */}
          {displayBadges.length === BADGE_LIMIT && isOwnProfile && (
            <CloseIcon />
          )}
        </ScrollView>
      )}
      {isEditBadgeModalVisible && (
        <BadgeDetailView
          userXId={userXId}
          screenType={screenType}
          isEditable={isOwnProfile}
          userFullName={name}
          setBadgeViewVisible={setIsEditBadgeModalVisible}
        />
      )}
    </>
  );
};

const styles = StyleSheet.create({
  title: {
    fontWeight: '600',
    fontSize: normalize(13.5),
    lineHeight: normalize(18),
  },
  body: {
    fontSize: normalize(13.5),
    lineHeight: normalize(17),
    marginBottom: 10,
  },
  badgeContainer: {
    width: '100%',
    justifyContent: 'space-between',
    marginTop: 10,
    marginBottom: 15,
  },
  circle: {
    width: normalize(31),
    height: normalize(31),
    borderRadius: normalize(31) / 2,
  },
  grey: {
    backgroundColor: '#c4c4c4',
  },
  plus: {
    width: normalize(31),
    height: normalize(31),
    color: 'black',
  },
  close: {
    width: normalize(31),
    height: normalize(31),
    color: 'grey',
    transform: [{rotate: '45deg'}],
  },
});

export default ProfileBadges;