import React from 'react';
import {SectionList, StyleSheet} from 'react-native';
import {SCREEN_HEIGHT} from '../../utils';
import BadgeItem from './BadgeItem';
import BadgeHeader from './BadgeListHeader';

interface BadgeListProps {
  data: any[];
  selectedBadges: any[];
  selectKey: (ikey: string) => void;
}

const BadgeList: React.FC<BadgeListProps> = ({
  data,
  selectedBadges,
  selectKey,
}) => {
  return (
    <SectionList
      stickySectionHeadersEnabled={false}
      style={{height: SCREEN_HEIGHT * 0.8}}
      contentContainerStyle={styles.listContainer}
      sections={data}
      keyExtractor={(item, index) => item + index}
      extraData={selectedBadges}
      renderItem={({item: {badgeName, badgeImage}, index}) => {
        return (
          <BadgeItem
            selected={selectedBadges.includes(badgeName)}
            onSelection={selectKey}
            title={badgeName}
            resourcePath={badgeImage}
            index={index}
          />
        );
      }}
      renderSectionHeader={({section: {title}}) => (
        <BadgeHeader title={title} />
      )}
    />
  );
};

const styles = StyleSheet.create({
  listContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'center',
    flexGrow: 1,
    paddingBottom: SCREEN_HEIGHT * 0.1,
  },
  scrollViewStyles: {
    paddingBottom: SCREEN_HEIGHT * 0.5,
  },
});

export default BadgeList;