import React from "react"
import { View, Text } from "react-native"
import Select from "react-native-multiple-select"
import { lmTypes } from "../../../../utils/GlobalUtils"

interface FilterLmTypesProps {
    localFilterTypes: number[],
    setLocalFilterTypes: (types: number[]) => void
}

/**
 * Component that offers a selector for landmark types to be filtered
 */
export const FilterLmTypes: React.FC<FilterLmTypesProps> = ({setLocalFilterTypes, localFilterTypes}) => {
    return (
        <View style={{marginBottom: 10, justifyContent: 'flex-start'}}>
            <Text style={{marginRight: 10, marginBottom: 5}}>Landmark type:</Text>
            <View style={{width: '100%', justifyContent: 'center'}}>
                <Select
                    textColor='black'  
                    itemTextColor='black'
                    displayKey="label"
                    uniqueKey="value"
                    submitButtonText="Confirm"
                    submitButtonColor='black'
                    onSelectedItemsChange={(types) => {
                        setLocalFilterTypes(types)
                    }}
                    selectedItems={localFilterTypes}
                    items={Object.keys(lmTypes)?.map(icon => {
                        return (
                            {label: lmTypes[parseInt(icon)].label.toUpperCase(), value: parseInt(icon), key: icon}
                        )})} />
            </View>
        </View> 
    )
}