/* 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 { FontAwesome } from "@expo/vector-icons";
import React, { memo, useState } from "react";
import { Dimensions, Image, SafeAreaView, Text, TouchableOpacity, View } from 'react-native';
import { ScrollView } from "react-native-gesture-handler";
import Modal from 'react-native-modal';
import { Landmark } from "../../../state/external/landmarks";
import { colors, lmTypes } from "../../../utils/GlobalUtils";

/**
 * Props for the {@link AddLandmarkPanel} component.
 */
export interface NearbyLandmarksPanelProps {
    toggleAlertedLmPanel: (state: boolean) => void
    nearbyLmPanelVisible: boolean
    nearbyLandmarks?: Landmark[];
    focusLandmark: (landmark: Landmark) => void
}

/**
 * Component that renders a form for adding a new {@link Landmark}. Contained within a [react-native-modal]{@link https://github.com/react-native-modal/react-native-modal}.
 * @component
 * @category Map
 */
const NearbyLandmarksPanel: React.FC<NearbyLandmarksPanelProps> = ({nearbyLandmarks: alertedLandmarks, toggleAlertedLmPanel: toggleNearbyLmPanel, nearbyLmPanelVisible: alertedLmPanelVisible, focusLandmark}) => {
    const [selectedLm, setSelectedlm] = useState<Landmark>()
    const switchToLandmarkDetails = () => {
        if (selectedLm) {
            focusLandmark(selectedLm)   
            setSelectedlm(undefined) 
        }
    }

    const selectLm = (lm: Landmark) => {
        setSelectedlm(lm)
        toggleNearbyLmPanel(false)
    }

    return (
        <Modal
            useNativeDriver={true}
            useNativeDriverForBackdrop={true}
            onModalHide={() => switchToLandmarkDetails()}
            onBackdropPress={() => toggleNearbyLmPanel(false)}
            style={{justifyContent: "flex-end", height: '100%', margin: 0}}
            isVisible={alertedLmPanelVisible} >
            <SafeAreaView style={{backgroundColor: colors.red, height: Dimensions.get('window').height * .6}}>
                <ScrollView>
                    {alertedLandmarks?.map((lm, i) => {
                        return (
                            <TouchableOpacity onPress={() => selectLm(lm)} key={i} style={{flexDirection: 'row', alignItems: 'center', paddingVertical: 10, marginHorizontal: 15, justifyContent: 'space-between', borderBottomWidth: 1, borderColor: 'lightgray'}}>
                                <Image source={lmTypes[lm.landmark_type].image}/>
                                <Text style={{fontSize: 20, color: 'white'}}>{lmTypes[lm.landmark_type].label.toUpperCase()}</Text>
                                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                                    <Text style={{marginRight: 5, color: 'white', fontSize: 20}}>{lm.rating}</Text>
                                    <FontAwesome name="thumbs-up" size={20} color='white' />
                                </View>
                            </TouchableOpacity>
                        )
                    })}
                </ScrollView>
            </SafeAreaView>
        </Modal>
    )
}

export default memo(NearbyLandmarksPanel);