import {useNavigation} from '@react-navigation/native';
import React, {useEffect, useState} from 'react';
import {Image, StyleSheet} from 'react-native';
import {TouchableOpacity} from 'react-native-gesture-handler';
import LinearGradient from 'react-native-linear-gradient';
import Animated, {Easing} from 'react-native-reanimated';
import {UniversityBadge} from 'src/types';
import {UniversityIcon} from '..';
import {normalize, SCREEN_WIDTH} from '../../utils';

interface BadgesDropdownProps {
  localBadges: {
    badge: UniversityBadge;
    img: string;
  }[];
}

const BadgesDropdown: React.FC<BadgesDropdownProps> = ({localBadges}) => {
  const [displayBadges, setDisplayBadges] = useState<boolean>(false);
  let [top, setTop] = useState<Animated.Value<number>[]>([]);
  const navigation = useNavigation();

  useEffect(() => {
    const defineBadgePositions = () => {
      let localTop: Animated.Value<number>[] = [];
      localBadges.forEach(() => {
        localTop.push(new Animated.Value(0));
      });
      setTop(localTop);
    };
    defineBadgePositions();
  }, []);

  const animate = () => {
    for (let i = 0; i < localBadges.length; i++) {
      if (top) {
        Animated.timing(top[i], {
          toValue: i * 40 + 50,
          duration: 500,
          easing: Easing.linear,
        }).start();
      }
    }
  };

  const animateBack = () => {
    for (let i = 0; i < localBadges.length; i++) {
      if (top) {
        Animated.timing(top[i], {
          toValue: 0,
          duration: 500,
          easing: Easing.linear,
        }).start();
      }
    }
  };
  return (
    <Animated.View
      style={[styles.badgesContainer, {height: 50 + 40 * localBadges.length}]}>
      <TouchableOpacity
        activeOpacity={0.95}
        onPress={() => {
          setDisplayBadges(!displayBadges);
          if (displayBadges) {
            animate();
          } else {
            animateBack();
          }
        }}>
        <UniversityIcon
          university="brown"
          style={styles.universityIconContainer}
          imageStyle={{width: normalize(31), height: normalize(38)}}
        />
      </TouchableOpacity>
      {localBadges &&
        localBadges.map(({badge, img}, index) => (
          <Animated.View
            key={badge.id}
            style={[
              styles.animatedBadgeView,
              {
                top: top[index],
                zIndex: -1 * parseInt(badge.id, 10),
              },
            ]}>
            <TouchableOpacity
              style={styles.badgeButton}
              onPress={() => {
                navigation.navigate('MutualBadgeHolders', {
                  badge_id: badge.id,
                  badge_title: badge.name,
                });
              }}>
              <LinearGradient
                colors={['#4E3629', '#EC2027']}
                useAngle={true}
                angle={154.72}
                angleCenter={{x: 0.5, y: 0.5}}
                style={styles.badgeBackground}>
                <Image
                  source={img}
                  style={{
                    width: SCREEN_WIDTH * 0.04,
                    height: SCREEN_WIDTH * 0.04,
                  }}
                />
              </LinearGradient>
            </TouchableOpacity>
          </Animated.View>
        ))}
    </Animated.View>
  );
};

const styles = StyleSheet.create({
  badgeBackground: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    borderRadius: 50,
    borderColor: 'transparent',
    borderWidth: 1,
    alignSelf: 'center',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  badgesContainer: {
    flexDirection: 'column',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: 38,
    left: '5%',
    paddingBottom: '2%',
  },
  badgeButton: {
    width: 30,
    height: 30,
    borderRadius: 15,
  },
  animatedBadgeView: {position: 'absolute'},
  universityIconContainer: {
    width: normalize(31),
    height: normalize(38),
  },
});

export default BadgesDropdown;