import React from "react";
import {View, StyleSheet, FlatList,Text,TouchableHighlight} from "react-native";
import Tag from "./Tag";
import PropTypes from "prop-types";



class TagList extends React.Component{



    render(){
        return (
            <FlatList
                horizontal={true}
                extraData={this.props}
                data={this.props.data}
                keyExtractor={(item, index) => item.id}
                renderItem={({item, index, separators}) => (
                    <View key={index} style={{marginHorizontal: 2}}>
                        <Tag onPress={() => this.props.onItemPress(item, index)}  {...this.props.tagProps} key={item.id}
                             title={item.title} active={item.active}/>
                    </View>
                )}
            />
        )
    }


};

const styles = StyleSheet.create({
    mainView: {
        flex: 1
    }
});

TagList.propTypes = {
    mainViewStyle: PropTypes.object,
    tagProps: PropTypes.object,
    data: PropTypes.array,
    onItemPress: PropTypes.func
};

TagList.defaultProps = {
    height: 50,
    removeIcon: false
};

export default TagList
