import React, {useEffect, useState} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {TouchableOpacity} from 'react-native-gesture-handler';
import {useSelector} from 'react-redux';
import {PROFILE_CUTOUT_TOP_Y} from '../../constants';
import {BADGE_DATA} from '../../constants/badges';
import {getSuggestedPeopleProfile} from '../../services';
import {RootState} from '../../store/rootreducer';
import {ScreenType, UniversityBadge} from '../../types';
import {normalize} from '../../utils';
import BadgeDetailView from '../common/BadgeDetailView';
import Avatar from './Avatar';
import FriendsCount from './FriendsCount';
import ProfileMoreInfoDrawer from './ProfileMoreInfoDrawer';
import UniversityIcon from './UniversityIcon';

type ProfileHeaderProps = {
  userXId: string | undefined;
  screenType: ScreenType;
  isBlocked: boolean;
  handleBlockUnblock: () => void;
};

const ProfileHeader: React.FC<ProfileHeaderProps> = ({
  userXId,
  screenType,
  isBlocked,
  handleBlockUnblock,
}) => {
  const {
    profile: {name = '', university_class = 2021, university},
    user: {userId, username: userXName = ''},
  } = useSelector((state: RootState) =>
    userXId ? state.userX[screenType][userXId] : state.user,
  );

  const {
    user: {username = ''},
  } = useSelector((state: RootState) => state.user);
  const [drawerVisible, setDrawerVisible] = useState(false);
  const [showBadgeView, setBadgeViewVisible] = useState(false);
  const [firstName, lastName] = [...name.split(' ')];
  const [selectedBadges, setSelectedBadges] = useState<UniversityBadge[]>([]);
  const [selectedBadgesWithImage, setSelectedBadgesWithImage] = useState<any[]>(
    [],
  );

  const fetchBadges = async () => {
    const uid = userXId ? userXId : userId;
    if (uid) {
      const response = await getSuggestedPeopleProfile(uid);
      if (response) {
        const data = response.badges;
        let extractedBadgeNames: UniversityBadge[] = [];
        data.forEach((badge) => {
          extractedBadgeNames.push(badge);
        });
        setSelectedBadges(extractedBadgeNames);
      }
    }
  };

  useEffect(() => {
    fetchBadges();
  }, []);

  useEffect(() => {
    let badgesWithImage = [];
    selectedBadges.forEach((e) => {
      const uniData = BADGE_DATA[e.university];
      const categoryData = uniData.filter((u) => {
        return u.title === e.category;
      });
      const badgeData = categoryData[0].data.filter((c) => {
        return c.badgeName === e.name;
      });
      badgeData.forEach((c) => {
        const obj = {...e, badgeImage: c.badgeImage};
        badgesWithImage.push(obj);
      });
    });
    setSelectedBadgesWithImage(badgesWithImage);
  }, [selectedBadges]);

  return (
    <View style={styles.container}>
      <ProfileMoreInfoDrawer
        isOpen={drawerVisible}
        isBlocked={isBlocked}
        handleBlockUnblock={handleBlockUnblock}
        userXId={userXId}
        userXName={userXName}
        setIsOpen={setDrawerVisible}
      />

      <View style={styles.row}>
        <Avatar
          style={styles.avatar}
          userXId={userXId}
          screenType={screenType}
        />
        <View style={styles.header}>
          {name.length <= 16 ? (
            <Text style={styles.name}>{name}</Text>
          ) : (
            <View>
              <Text style={styles.name}>{firstName}</Text>
              <Text style={styles.name}>{lastName}</Text>
            </View>
          )}
          <View style={styles.friendsAndUniversity}>
            <FriendsCount screenType={screenType} userXId={userXId} />
            <TouchableOpacity onPress={() => setBadgeViewVisible(true)}>
              <UniversityIcon {...{university, university_class}} />
            </TouchableOpacity>
            {showBadgeView && (
              <BadgeDetailView
                isEditable={userXName === username}
                name={name}
                selectedBadges={selectedBadgesWithImage}
                setBadgeViewVisible={setBadgeViewVisible}
              />
            )}
          </View>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    top: PROFILE_CUTOUT_TOP_Y * 1.02,
    width: '100%',
    position: 'absolute',
  },
  row: {
    flexDirection: 'row',
  },
  header: {
    flexDirection: 'column',
    justifyContent: 'space-evenly',
    alignItems: 'center',
    marginRight: '15%',
    marginLeft: '5%',
    flex: 1,
  },
  avatar: {
    marginLeft: '3%',
    top: '-8%',
  },
  name: {
    fontSize: normalize(17),
    fontWeight: '500',
    alignSelf: 'center',
  },
  friendsAndUniversity: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-evenly',
    width: '100%',
    height: 50,
  },
});

export default ProfileHeader;