import { FontAwesome } from "@expo/vector-icons";
import * as ImagePicker from 'expo-image-picker';
import { ImageInfo } from "expo-image-picker/build/ImagePicker.types";
import React, { memo, useEffect, useState } from "react";
import { ActivityIndicator, Dimensions, Image, Platform, SafeAreaView, Text, TextInput, TouchableOpacity, View } from 'react-native';
import { FlatList, ScrollView } from "react-native-gesture-handler";
import Modal from 'react-native-modal';
import { checkMultiple, PERMISSIONS, RESULTS } from "react-native-permissions";
import Picker from 'react-native-picker-select';
import { Landmark, LMPhoto, useLandmarks } from "../../../hooks/useLandmarks";
import { colors, getMediaPermissions, lmTypes } from "../../../utils/GlobalUtils";
import Badge from "../../Badge";
import { IconButton, SecondaryButton } from "../../Buttons";
import { PhotoPicker } from "../../PhotoPicker";

/**
 * Props for the {@link AddLandmarkPanel} component.
 */
export interface AlertedLandmarkPanelProps {
    toggleAlertedLmPanel: (state: boolean) => void
    alertedLmPanelVisible: boolean
    alertedLandmarks?: 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 AlertedLandmarkPanel: React.FC<AlertedLandmarkPanelProps> = ({alertedLandmarks, toggleAlertedLmPanel, alertedLmPanelVisible, focusLandmark}) => {
    const [selectedLm, setSelectedlm] = useState<Landmark>()
    const switchToLandmarkDetails = () => {
        if (selectedLm) {
            focusLandmark(selectedLm)   
            setSelectedlm(undefined) 
        }
    }

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

    return (
        <Modal
            useNativeDriver={true}
            useNativeDriverForBackdrop={true}
            onModalHide={() => switchToLandmarkDetails()}
            onBackdropPress={() => toggleAlertedLmPanel(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(AlertedLandmarkPanel);