/* Copyright (C) Click & Push Accessibility, Inc - All Rights Reserved
 * Unauthorized copying of this file, via any medium is strictly prohibited
 * Proprietary and confidential
 * Written and maintained by the Click & Push Development team 
 * <dev@clicknpush.ca>, January 2022
 */

import React, { useEffect, useState } from "react";
import { View, Text, ScrollView } from "react-native"
import Select from "react-native-multiple-select"
import { lmTypes as lmTypess, lmTypesIndoor } from "../../../../utils/GlobalUtils"
import { useNavigation, useNavigationState, useRoute } from "@react-navigation/native"


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 }) => {

    const navigationState = useNavigationState(state => state)
    const [currentRoute, setCurrentRoute] = useState<string>()
    useEffect(() => {
        const currentRouteIndex = navigationState?.routes[0]?.state?.index
        const currentRouteName = navigationState?.routes[0]?.state?.routeNames[currentRouteIndex]
        setCurrentRoute(currentRouteName)
    }, [navigationState])

    let lmTypes = lmTypess

    if (currentRoute == "Indoor") {
        lmTypes = lmTypesIndoor
    }

    return (
        <View style={{ justifyContent: 'flex-start' }}>
            <Text style={{ marginRight: 10, marginBottom: 5 }}>Landmark type:</Text>
            <View style={{ borderColor: "blue", borderWidth: 0, width: '100%', justifyContent: 'center' }}>

                {/* <ScrollView style={{height:"60%"}}> */}
                    <Select
                        styleRowList={{ borderColor: "red", borderWidth: 0 }}
                        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 }
                            )
                        })}>
                    </Select>
                {/* </ScrollView> */}

                {/* {console.log("*FILTER PANEL* currentRoute is " + currentRoute)} */}
            </View>
        </View>
    )
}