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 {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 (
    <TouchableOpacity onPress={() => onSelection(title)}>
      <LinearGradient
        colors={index === 0 ? BADGE_GRADIENT_FIRST : BADGE_GRADIENT_REST}
        useAngle={true}
        angle={136.69}
        style={styles.item}>
        <View
          style={
            selected ? styles.selectedDetailContainer : styles.detailContainer
          }>
          <Image source={resourcePath} style={styles.imageStyles} />
          <View style={styles.textContainer}>
            <Text style={styles.title}>{title}</Text>
          </View>
        </View>
      </LinearGradient>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  item: {
    width: SCREEN_WIDTH / 3 - 20,
    height: SCREEN_WIDTH / 3 - 20,
    marginLeft: 15,
    marginBottom: 12,
    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: '31%',
    height: '31%',
    marginTop: '11%',
  },
  textContainer: {marginTop: '16%'},
  title: {
    fontSize: normalize(15),
    fontWeight: '500',
    lineHeight: normalize(17.9),
    textAlign: 'center',
    color: 'white',
    marginHorizontal: '2%',
  },
});

export default BadgeItem;