import React, {useEffect, useState} from 'react';
import {Alert, StyleSheet, Text, View} from 'react-native';
import {ScrollView} from 'react-native-gesture-handler';
import {useSelector} from 'react-redux';
import {BadgeIcon} from '..';
import PlusIcon from '../../assets/icons/plus_icon-01.svg';
import {RootState} from '../../store/rootReducer';
import {ScreenType, UniversityBadgeDisplayType} from '../../types';
import {badgesToDisplayBadges, normalize} from '../../utils';

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

const ProfileBadges: React.FC<ProfileBadgesProps> = ({userXId, screenType}) => {
  const {badges} = useSelector((state: RootState) =>
    userXId ? state.userX[screenType][userXId].profile : state.user.profile,
  );
  const [displayBadges, setDisplayBadges] = useState<
    UniversityBadgeDisplayType[]
  >([]);

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

  return (
    <>
      {displayBadges.length === 0 && (
        <>
          <Text style={styles.title}>Badges</Text>
          <Text style={styles.body}>
            Proudly represent your team, club, or organization!
          </Text>
        </>
      )}
      {displayBadges.length === 0 ? (
        <ScrollView contentContainerStyle={styles.badgeContainer} horizontal>
          <PlusIcon
            width={normalize(31)}
            height={normalize(31)}
            color={'black'}
            onPress={() => Alert.alert('fooo')}
          />
          {[0, 0, 0, 0, 0].map(() => (
            <View style={styles.greyCircle} />
          ))}
        </ScrollView>
      ) : (
        <ScrollView contentContainerStyle={styles.badgeContainer} horizontal>
          {displayBadges.map((displayBadge) => (
            <BadgeIcon key={displayBadge.id} badge={displayBadge} />
          ))}
        </ScrollView>
      )}
    </>
  );
};

const styles = StyleSheet.create({
  title: {
    fontWeight: '600',
    fontSize: normalize(13.5),
    lineHeight: normalize(18),
  },
  body: {
    fontSize: normalize(13.5),
    lineHeight: normalize(17),
  },
  badgeContainer: {
    width: '100%',
    borderWidth: 1,
    justifyContent: 'space-between',
  },
  greyCircle: {
    width: normalize(31),
    height: normalize(31),
    borderRadius: normalize(31) / 2,
    backgroundColor: '#c4c4c4',
  },
});

export default ProfileBadges;