import React, {useState, useEffect} from 'react'
import { Image } from 'react-native';
import Picker, { Item } from 'react-native-picker-select'
import { FontAwesome } from "@expo/vector-icons";
import { View } from 'react-native';
import { colors, lmTypes as allLmTypes, lmTypesIndoor } from "../utils/GlobalUtils";

interface LandmarkTypePickerProps {
    onValueChange: (value: any, index: number) => void,
    value?: any,
    cats: Item[],
    items: Item[],
    placeholder?: {} | Item 
}

const LandmarkTypePicker: React.FC<LandmarkTypePickerProps> = ({items, cats, value, onValueChange, placeholder}) => {

    const [selectedValueCat, setSelectedValueCat] = useState();

    let lmTypes = allLmTypes;

    return (
        <><View style={{ flexDirection: 'row' }}>
            <Picker
                style={{
                    inputIOS: { color: 'white' },
                    inputAndroid: { color: 'white', alignItems: 'center', justifyContent: 'center' },
                    viewContainer: { marginVertical: 5, flex: 1 },
                    iconContainer: { height: '100%', justifyContent: 'center' },
                    placeholder: { color: 'white' }
                }}
                textInputProps={{ placeholderTextColor: 'white', selectionColor: 'white' }}
                Icon={() => <FontAwesome name="chevron-down" color='white' style={{ alignSelf: 'center' }} size={20} />}
                placeholder={placeholder}
                onValueChange={(value) => setSelectedValueCat(value)}
                useNativeAndroidPickerStyle={true}
                items={cats} />

        </View>
        <View style={{ flexDirection: 'row' }}>
                {selectedValueCat ?
                    <Picker
                        style={{
                            inputIOS: { color: 'white' },
                            inputAndroid: { color: 'white', alignItems: 'center', justifyContent: 'center' },
                            viewContainer: { marginVertical: 5, flex: 1 },
                            iconContainer: { height: '100%', justifyContent: 'center' },
                            placeholder: { color: 'white' }
                        }}
                        textInputProps={{ placeholderTextColor: 'white', selectionColor: 'white' }}
                        Icon={() => <FontAwesome name="chevron-down" color='white' style={{ alignSelf: 'center' }} size={20} />}
                        placeholder={placeholder}
                        value={value}
                        onValueChange={onValueChange}
                        useNativeAndroidPickerStyle={true}
                        items={items.filter((icon) => {
                            return icon.key == cats[selectedValueCat[0] - 1].label
                           })
                        } /> : null}

                {value ? <Image style={{ marginLeft: 20 }} source={lmTypes[value].image} />
                    : null}
        </View></>
    )
    
}

export default React.memo(LandmarkTypePicker)
