import React, {useEffect, useState} from 'react';
import {StatusBar, SafeAreaView, View, StyleSheet} from 'react-native';
import {BackgroundGradientType} from '../../types';
import {StatusBarHeight, SCREEN_HEIGHT} from '../../utils';
import LinearGradient from 'react-native-linear-gradient';
import {BACKGROUND_GRADIENT_MAP} from '../../constants';
import BadgeList from './BadgeList';
import BadgeScreenHeader from './BadgeScreenHeader';
import {ADD_USER_BADGES} from '../../constants';
import {getTokenOrLogout} from './../../utils';
import Animated from 'react-native-reanimated';

import {SearchBar} from '../../components';

import {StackNavigationProp} from '@react-navigation/stack';

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

const BadgeImages = {
  football: require('../../assets/images/badges/football.png'),
  track: require('../../assets/images/badges/track.png'),
  volleyball: require('../../assets/images/badges/volleyball.png'),
  lax: require('../../assets/images/badges/brown_badge.png'),
  fieldHockey: require('../../assets/images/badges/field_hockey.png'),
  gymnastics: require('../../assets/images/badges/gymnastics.png'),
  hockey: require('../../assets/images/badges/hockey.png'),
  baseball: require('../../assets/images/badges/baseball.png'),
  basketball: require('../../assets/images/badges/basketball.png'),
  kappadelta: require('../../assets/images/badges/kappa_delta.png'),
  alphachiomega: require('../../assets/images/badges/alpha_chi_omega.png'),
  deltagamma: require('../../assets/images/badges/delta_gamma.png'),
  sigma: require('../../assets/images/badges/sigma.png'),
  thetaalpha: require('../../assets/images/badges/theta_alpha.png'),
  deltaphi: require('../../assets/images/badges/delta_phi.png'),
  kappaalphapsi: require('../../assets/images/badges/kappa_alpha_psi.png'),
  alphaphialpha: require('../../assets/images/badges/alpha_phi_alpha.png'),
  betaomegachi: require('../../assets/images/badges/beta_omega_chi.png'),
};

const DATA = [
  {
    title: 'Athletics',
    data: [
      {
        badgeName: 'Brown Football',
        badgeImage: BadgeImages.football,
      },
      {
        badgeName: 'Brown Track',
        badgeImage: BadgeImages.track,
      },
      {
        badgeName: 'Brown Volleyball',
        badgeImage: BadgeImages.volleyball,
      },
      {
        badgeName: 'Brown LAX',
        badgeImage: BadgeImages.lax,
      },
      {
        badgeName: 'Brown Field Hockey',
        badgeImage: BadgeImages.fieldHockey,
      },
      {
        badgeName: 'Brown Gymnastics',
        badgeImage: BadgeImages.gymnastics,
      },
      {
        badgeName: 'Brown Hockey',
        badgeImage: BadgeImages.hockey,
      },
      {
        badgeName: 'Brown Baseball',
        badgeImage: BadgeImages.baseball,
      },
      {
        badgeName: 'Brown Basketball',
        badgeImage: BadgeImages.basketball,
      },
    ],
  },

  {
    title: 'Sorority',
    data: [
      {
        badgeName: 'Kappa Delta',
        badgeImage: BadgeImages.kappadelta,
      },
      {
        badgeName: 'Alpha Chi Omega',
        badgeImage: BadgeImages.alphachiomega,
      },
      {
        badgeName: 'Delta Gamma',
        badgeImage: BadgeImages.deltagamma,
      },
    ],
  },

  {
    title: 'Fraternity',
    data: [
      {
        badgeName: 'Sigma',
        badgeImage: BadgeImages.sigma,
      },
      {
        badgeName: 'Theta Alpha',
        badgeImage: BadgeImages.thetaalpha,
      },
      {
        badgeName: 'Delta Phi',
        badgeImage: BadgeImages.deltaphi,
      },
    ],
  },
  {
    title: 'Historically Black Fraternities',
    data: [
      {
        badgeName: 'Kappa Alpha Psi',
        badgeImage: BadgeImages.kappadelta,
      },
      {
        badgeName: 'Alpha Phi Alpha',
        badgeImage: BadgeImages.alphaphialpha,
      },
      {
        badgeName: 'Beta Omega Chi',
        badgeImage: BadgeImages.betaomegachi,
      },
    ],
  },
];

import {TouchableOpacity} from 'react-native-gesture-handler';
import {Text} from 'react-native-animatable';
import {useDispatch} from 'react-redux';

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

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

type BadgeSelectionProps = {
  navigation: BadgeSelectionScreenNavigationProp;
};

const BadgeSelection: React.FC<BadgeSelectionProps> = ({navigation}) => {
  const [canSubmit, setCanSubmit] = useState(false);
  navigation.setOptions({
    headerRight: () => (
      <TouchableOpacity
        style={styles.rightButtonContainer}
        onPress={() => {
          if (canSubmit) {
            uploadUserSelection();
          }
        }}>
        <Text style={styles.rightButton}>{canSubmit ? 'Done' : 'Skip'}</Text>
      </TouchableOpacity>
    ),
    headerLeft: () => (
      <TouchableOpacity style={styles.leftButtonContainer}>
        <Text style={styles.leftButton}>Cancel</Text>
      </TouchableOpacity>
    ),
  });

  const [selectedBadges, setSelectedBadges] = useState(Array<string>());
  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 {
      const selectedBadgesArray = [...selectedBadges, key];
      setSelectedBadges(selectedBadgesArray);
    }
  };
  const dispatch = useDispatch();
  useEffect(() => {
    setCanSubmit(selectedBadges.length !== 0);
  }, [selectedBadges]);

  const uploadUserSelection = async () => {
    try {
      const token = await getTokenOrLogout(dispatch);
      const reqBody = JSON.stringify({
        badges: selectedBadges,
      });
      console.log(ADD_USER_BADGES);
      console.log(reqBody);
      const response = await fetch(ADD_USER_BADGES, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: 'Token ' + token,
        },
        body: reqBody,
      });
      const status = response.status;
      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <LinearGradient
      colors={BACKGROUND_GRADIENT_MAP[BackgroundGradientType.Dark]}
      style={styles.container}>
      <StatusBar barStyle={'light-content'} />
      <SafeAreaView>
        <View style={styles.listContainer}>
          <BadgeScreenHeader />
          <SearchBar
            style={styles.searchBarStyle}
            onCancel={() => {}}
            top={Animated.useValue(0)}
          />
          <BadgeList
            data={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;