import React from 'react';
import {View, Text, StyleSheet, Image, ImageSourcePropType} from 'react-native';
import {SCREEN_WIDTH, normalize} from '../../utils';
import LinearGradient from 'react-native-linear-gradient';
import {
  BACKGROUND_GRADIENT_MAP,
  BADGE_GRADIENT_FIRST,
  BADGE_GRADIENT_REST,
} from '../../constants';
import {TouchableOpacity} from 'react-native-gesture-handler';

interface BadgeItemProps {
  title: string;
  resourcePath: ImageSourcePropType;
  index: Number;
  selected: boolean;
  onSelection: (ikey: string) => void;
}

const BadgeItem: React.FC<BadgeItemProps> = ({
  title,
  resourcePath,
  selected,
  index,
  onSelection,
}) => {
  return (
    <LinearGradient
      colors={
        selected ? BACKGROUND_GRADIENT_MAP[0] : ['transparent', 'transparent']
      }
      useAngle={true}
      angle={136.69}
      style={styles.border}>
      <TouchableOpacity
        onPress={() => onSelection(title)}
        style={{alignSelf: 'center', marginTop: 3}}>
        <LinearGradient
          colors={index === 0 ? BADGE_GRADIENT_FIRST : BADGE_GRADIENT_REST}
          // BACKGROUND_GRADIENT_MAP
          useAngle={true}
          angle={136.69}
          style={styles.item}>
          <View style={styles.detailContainer}>
            <Image source={resourcePath} style={styles.imageStyles} />
            <View style={styles.textContainer}>
              <Text style={styles.title}>{title}</Text>
            </View>
          </View>
        </LinearGradient>
      </TouchableOpacity>
    </LinearGradient>
  );
};

const styles = StyleSheet.create({
  border: {
    width: SCREEN_WIDTH / 3 - 20 + 6,
    height: 146,
    marginLeft: 10,
    marginBottom: 12,
    borderRadius: 8,
  },
  item: {
    width: SCREEN_WIDTH / 3 - 20,
    height: 140,
    borderRadius: 8,
  },
  detailContainer: {
    flexGrow: 1,
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 3,
    borderRadius: 8,
    borderColor: 'transparent',
  },
  selectedDetailContainer: {
    flexGrow: 1,
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 3,
    borderColor: 'white',
    borderRadius: 8,
  },
  imageStyles: {
    width: 40,
    height: 40,
    marginTop: '11%',
  },
  textContainer: {marginTop: '16%'},
  title: {
    fontSize: normalize(15),
    fontWeight: '500',
    lineHeight: normalize(17.9),
    textAlign: 'center',
    color: 'white',
    marginHorizontal: '2%',
  },
});

export default BadgeItem;