import AsyncStorage from '@react-native-community/async-storage';
import {RouteProp} from '@react-navigation/core';
import {StackNavigationProp} from '@react-navigation/stack';
import React, {useEffect, useState} from 'react';
import {Alert, SafeAreaView, StatusBar, StyleSheet, View} from 'react-native';
import {Text} from 'react-native-animatable';
import {TouchableOpacity} from 'react-native-gesture-handler';
import LinearGradient from 'react-native-linear-gradient';
import {useDispatch} from 'react-redux';
import {MainStackParams} from 'src/routes';
import {
  ADD_USER_BADGES,
  BACKGROUND_GRADIENT_MAP,
  UPDATE_USER_BADGES,
} from '../../constants';
import {BADGE_DATA} from '../../constants/badges';
import {
  ERROR_BADGES_EXCEED_LIMIT,
  ERROR_UPLOAD_BADGES,
} from '../../constants/strings';
import {suggestedPeopleBadgesFinished} from '../../store/actions';
import {BackgroundGradientType, UniversityBadge} from '../../types';
import {SCREEN_HEIGHT, StatusBarHeight} from '../../utils';
import BadgeList from './BadgeList';
import BadgeScreenHeader from './BadgeScreenHeader';

/**
 * Home Screen for displaying Tagg Badge Selections
 **/

type BadgeSelectionParamList = {
  BadgeList: any[];
};

type BadgeSelectionScreenNavigationProp = StackNavigationProp<
  BadgeSelectionParamList,
  'BadgeList'
>;

type BadgeSelectionRouteProp = RouteProp<MainStackParams, 'BadgeSelection'>;

type BadgeSelectionProps = {
  navigation: BadgeSelectionScreenNavigationProp;
  route?: BadgeSelectionRouteProp;
};

const BadgeSelection: React.FC<BadgeSelectionProps> = ({navigation, route}) => {
  const dispatch = useDispatch();
  navigation.setOptions({
    headerRight: () => (
      <TouchableOpacity
        style={styles.rightButtonContainer}
        onPress={async () => {
          if (route?.params.editing) {
            updateBadgesService();
            navigation.goBack();
          } else {
            if (selectedBadges.length !== 0) {
              uploadUserSelection();
            } else {
              dispatch(suggestedPeopleBadgesFinished());
            }
          }
        }}>
        <Text style={styles.rightButton}>
          {selectedBadges.length !== 0 ? 'Done' : 'Skip'}
        </Text>
      </TouchableOpacity>
    ),
  });

  const [selectedBadges, setSelectedBadges] = useState<string[]>([]);

  // Get list of badges from the backend and display here
  useEffect(() => {
    const extractBadgeNames = (badges: UniversityBadge[]) => {
      let extractedBadgeNames: string[] = [];
      badges.forEach((badge) => {
        extractedBadgeNames.push(badge.name);
      });
      setSelectedBadges(extractedBadgeNames);
    };
    if (route && route.params.selectedBadges) {
      extractBadgeNames(route.params.selectedBadges);
    }
  }, []);

  const selectKey = (key: string) => {
    if (selectedBadges.includes(key)) {
      const selectedBadgesArray = [...selectedBadges];
      const itemIndex = selectedBadgesArray.indexOf(key);
      if (itemIndex > -1) {
        selectedBadgesArray.splice(itemIndex, 1);
      }
      setSelectedBadges(selectedBadgesArray);
    } else {
      if (selectedBadges.length < 5) {
        const selectedBadgesArray = [...selectedBadges, key];
        setSelectedBadges(selectedBadgesArray);
      } else {
        Alert.alert(ERROR_BADGES_EXCEED_LIMIT);
      }
    }
  };

  const uploadUserSelection = async () => {
    try {
      const token = await AsyncStorage.getItem('token');
      const form = new FormData();
      form.append('badges', JSON.stringify(selectedBadges));
      const response = await fetch(ADD_USER_BADGES, {
        method: 'POST',
        headers: {
          'Content-Type': 'multipart/form-data',
          Authorization: 'Token ' + token,
        },
        body: form,
      });
      if (response.status === 400) {
        Alert.alert(ERROR_BADGES_EXCEED_LIMIT);
        return;
      }
      dispatch(suggestedPeopleBadgesFinished());
    } catch (error) {
      console.log(error);
      Alert.alert(ERROR_UPLOAD_BADGES);
    }
  };

  const updateBadgesService = async () => {
    try {
      const token = await AsyncStorage.getItem('token');
      const form = new FormData();
      console.log('selectedBadges: ', selectedBadges);
      form.append('badges', JSON.stringify(selectedBadges));
      const response = await fetch(UPDATE_USER_BADGES, {
        method: 'POST',
        headers: {
          'Content-Type': 'multipart/form-data',
          Authorization: 'Token ' + token,
        },
        body: form,
      });
      if (response.status === 400) {
        Alert.alert(ERROR_BADGES_EXCEED_LIMIT);
        return;
      }
      console.log('response: ', response);
    } catch (error) {
      console.log(error);
      Alert.alert(ERROR_UPLOAD_BADGES);
    }
  };

  return (
    <LinearGradient
      colors={BACKGROUND_GRADIENT_MAP[BackgroundGradientType.Dark]}
      style={styles.container}>
      <StatusBar barStyle={'light-content'} />
      <SafeAreaView>
        <View style={styles.listContainer}>
          <BadgeScreenHeader />
          {/* filter not working, comment out for now */}
          {/* <SearchBar
            style={styles.searchBarStyle}
            onCancel={() => {}}
            top={Animated.useValue(0)}
          /> */}
          <BadgeList
            data={BADGE_DATA}
            selectedBadges={selectedBadges}
            selectKey={selectKey}
          />
        </View>
      </SafeAreaView>
    </LinearGradient>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  searchBarStyle: {
    width: '95%',
    alignSelf: 'center',
    marginTop: SCREEN_HEIGHT * 0.05,
  },
  viewContainer: {marginTop: StatusBarHeight},
  listContainer: {marginTop: SCREEN_HEIGHT * 0.05},
  rightButtonContainer: {marginRight: 24},
  rightButton: {
    color: '#FFFFFF',
    fontWeight: 'bold',
    fontSize: 15,
    lineHeight: 18,
  },
  leftButtonContainer: {marginLeft: 24},
  leftButton: {
    color: '#FFFFFF',
    fontWeight: '500',
    fontSize: 15,
    lineHeight: 18,
  },
});

export default BadgeSelection;