import {RouteProp} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import React, {useEffect, useState} from 'react';
import {getMutualBadgeHolders} from '../../services';
import {ProfilePreviewType} from '../../types';
import {MainStackParams} from '../../routes/main/MainStackNavigator';
import {Image, Text, View} from 'react-native-animatable';
import {SafeAreaView} from 'react-native-safe-area-context';
import {SCREEN_HEIGHT, SCREEN_WIDTH, isIPhoneX, normalize} from '../../utils';
import LinearGradient from 'react-native-linear-gradient';
import CloseIcon from '../../assets/ionicons/close-outline.svg';
import {FlatList} from 'react-native-gesture-handler';
import {StyleSheet, TouchableOpacity} from 'react-native';
import ExploreSectionUser from '../../components/search/ExploreSectionUser';

type MutualBadgeHoldersRouteProps = RouteProp<
  MainStackParams,
  'MutualBadgeHolders'
>;

type MutualBadgeHoldersNavigationProps = StackNavigationProp<
  MainStackParams,
  'MutualBadgeHolders'
>;

interface MutualBadgeHoldersProps {
  route: MutualBadgeHoldersRouteProps;
  navigation: MutualBadgeHoldersNavigationProps;
}

const MutualBadgeHolders: React.FC<MutualBadgeHoldersProps> = ({
  route,
  navigation,
}) => {
  const {badge_id, badge_title, badge_img} = route.params;
  const [users, setUsers] = useState<ProfilePreviewType[] | undefined>([]);

  useEffect(() => {
    const getUsers = async () => {
      let localUsers: ProfilePreviewType[] | undefined =
        await getMutualBadgeHolders(badge_id);

      setUsers(localUsers);
    };
    getUsers();
  }, [badge_id]);

  return (
    <SafeAreaView>
      <View style={styles.mainContainer}>
        <View style={styles.mainContentContainer}>
          <TouchableOpacity
            style={styles.closeButton}
            onPress={() => {
              navigation.goBack();
            }}>
            <CloseIcon height={'100%'} width={'100%'} color={'grey'} />
          </TouchableOpacity>
          <View style={styles.iconView}>
            <LinearGradient
              colors={['#4E3629', '#EC2027']}
              useAngle={true}
              angle={154.72}
              angleCenter={{x: 0.5, y: 0.5}}
              style={styles.badgeBackground}>
              {/* TODO: Insert image link according to badge_id passed.
               * Awaiting final images from product
               */}
              <Image
                source={badge_img}
                style={{width: SCREEN_WIDTH * 0.1, height: SCREEN_WIDTH * 0.1}}
              />
            </LinearGradient>
          </View>
          <View style={styles.headerContainer}>
            <Text style={styles.heading}>{badge_title}</Text>
            <Text style={styles.subHeading}>See who else has this badge!</Text>
          </View>
          <FlatList
            data={users}
            numColumns={3}
            columnWrapperStyle={styles.columnWrapperStyle}
            renderItem={(user) => {
              return (
                <ExploreSectionUser
                  key={user.item.id}
                  user={user.item}
                  externalStyles={exploreUserStyle}
                />
              );
            }}
            keyExtractor={(item, index) => index.toString()}
            showsVerticalScrollIndicator={false}
            style={styles.flatlistContainer}
            contentContainerStyle={styles.flatlistContentContainer}
          />
          <View />
        </View>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  mainContainer: {
    flexDirection: 'column',
    justifyContent: 'flex-end',
    width: SCREEN_WIDTH,
    height: isIPhoneX() ? SCREEN_HEIGHT * 0.85 : SCREEN_HEIGHT * 0.88,
  },
  mainContentContainer: {
    backgroundColor: '#fff',
    width: SCREEN_WIDTH * 0.93,
    height: SCREEN_HEIGHT * 0.64,
    alignSelf: 'center',
    bottom: '2.5%',
    borderColor: '#fff',
    borderWidth: 1,
    borderRadius: 5,
  },
  closeButton: {
    position: 'absolute',
    height: normalize(20),
    width: normalize(20),
    left: '3%',
    top: '2%',
  },
  badgeBackground: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    borderRadius: 50,
    borderColor: 'transparent',
    borderWidth: 1,
    alignSelf: 'center',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  iconView: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    width: SCREEN_WIDTH * 0.2,
    height: SCREEN_WIDTH * 0.2,
    alignSelf: 'center',
    top: -SCREEN_WIDTH * 0.1,
  },
  headerContainer: {
    top: '-5%',
    width: '100%',
    height: '9%',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'space-evenly',
  },
  heading: {
    fontSize: normalize(17),
    fontWeight: '600',
    lineHeight: normalize(20),
    color: '#000',
  },
  subHeading: {
    fontSize: normalize(11),
    fontWeight: '600',
    lineHeight: normalize(15),
    color: '#828282',
  },
  columnWrapperStyle: {
    width: SCREEN_WIDTH * 0.85,
    flexDirection: 'row',
    flexGrow: 0,
    alignSelf: 'center',
    justifyContent: 'space-between',
    marginBottom: '8%',
  },
  flatlistContainer: {
    width: SCREEN_WIDTH * 0.85,
    alignSelf: 'center',
    flexDirection: 'column',
    top: '-1%',
  },
  flatlistContentContainer: {
    width: SCREEN_WIDTH * 0.85,
    paddingBottom: 20,
    alignSelf: 'center',
  },
});

const exploreUserStyle = StyleSheet.create({
  container: {},
  name: {
    fontWeight: '600',
    flexWrap: 'wrap',
    fontSize: normalize(12),
    lineHeight: normalize(15),
    color: '#000',
    textAlign: 'center',
  },
  username: {
    fontWeight: '500',
    fontSize: normalize(10),
    lineHeight: normalize(15),
    color: '#000',
  },
});
export default MutualBadgeHolders;