/* 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 { useNavigationState } from "@react-navigation/native";
import React, { MutableRefObject, useEffect, useState } from "react";
import { FlatList, Image, ScrollView, StyleSheet, Text, TextInput, View } from "react-native";
import Picker from "react-native-picker-select";
import { QueryStatus } from "react-query";
import { LMComment } from "../../../../data/comments";
import { Landmark, LMPhoto } from "../../../../data/landmarks";
import { MainTabsNavigationProp } from "../../../../navigation/MainTabsNavigator";
import { lmTypes as allLmTypes, lmTypesIndoor } from "../../../../utils/GlobalUtils";
import LandmarkTypePicker from "../../../LandmarkTypePicker";
import { Separator } from "../../../Separator";
import { CommentsContainer } from "./CommentsContainer";
import { LandmarkPhotos } from "./LandmarkPhotos";



interface DetailsBodyProps {
    editingEnabled: boolean,
    updatedLandmark?: Landmark,
    landmark?: Landmark,
    setUpdatedLandmark: (landmark: Landmark) => void,
    comments?: LMComment[],
    commentListRef: MutableRefObject<FlatList>
    commentTextInputRef: MutableRefObject<TextInput>
    focusedCommentId?: string,
    focusComment: (id: string) => void,
    startEditingComment: (comment: LMComment) => void,
    deleteComment: (id: string) => void
    commentBeingEdited?: LMComment, 
    setCommentBeingEdited: (comment: LMComment) => void,
    setNewComment: (commentId: string) => void,
    newCommentId?: string,
    editComment: (comment: LMComment) => void,
    addComment: () => void
    setSelectedImage: (index: number) => void 
    tryDeletePhoto: (photoId: string) => void
    addPhoto: (photo: LMPhoto) => void
    addPhotoStatus: QueryStatus
    deletePhotoStatus: QueryStatus 
    toggleLmDetails: (state: boolean) => void
    setKeyboardOpened: (state: boolean) => void
    keyboardOpened: boolean
    profileId: string
    processingPhoto: boolean
    setProcessingPhoto: (state: boolean) => void
    authNavigation: MainTabsNavigationProp
}

/**
 * Component that renders the body of the Landmark details panel
*/
export const DetailsBody: React.FC<DetailsBodyProps> = (props) => {

    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 = allLmTypes
    if(currentRoute=="Indoor") {
        lmTypes = lmTypesIndoor
    }


    useEffect(() => {
        if (props.editingEnabled) {
            console.log("[LandmarkDetails]: Editing is enabled")
            props.setUpdatedLandmark(props.landmark)
        }
        else {
            props.setUpdatedLandmark(undefined)
        }
    }, [props.editingEnabled])
    
    /**
     * Sub-component that renders picker for landmark types
     * @param 
     */
    const LandmarkTypePickerContainer: React.FC = () => {
        return (
        <View style={{flexDirection: 'row', marginBottom: 20, justifyContent: "space-between"}}>
            {props.updatedLandmark?.landmark_type ? 
            <>
                <LandmarkTypePicker 
                    placeholder={{}}
                    value={props.updatedLandmark?.landmark_type} 
                    onValueChange={(value) => {
                        props.setUpdatedLandmark({...props.updatedLandmark, landmark_type: value, title: lmTypes[value].label})
                    }}  
                    items={Object.keys(lmTypes)?.filter(icon => parseInt(icon) != props.landmark?.landmark_type).map(icon => {
                        return (
                            {label: lmTypes[parseInt(icon)].label.toUpperCase(), value: icon, key: icon}
                        )})}/>
                {props.updatedLandmark ? <Image style={{marginLeft: 20}} source={lmTypes[props.updatedLandmark?.landmark_type].image}/> : null}
            </>
            : null}
        </View>
        )
    }

    /**
     * Sub-component that renders the view to be displayed when editing is disabled
     * @param 
     */
    const EditingDisabledUpperView: React.FC = () => {
        return (
            <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
                <View style={{flex: 8, flexDirection: 'column', marginBottom: 20}}>
                    <Text style={{color: 'white', marginBottom: 10, fontSize: 15}}>{lmTypes[props.landmark?.landmark_type]?.label.toUpperCase()}</Text>
                    <ScrollView nestedScrollEnabled={true}>
                        <Text style={{color: 'white', fontSize: 13}}>{props.landmark?.description}</Text>
                    </ScrollView>
                </View>
                {props.landmark?.landmark_type ? <Image source={lmTypes[props.landmark?.landmark_type]?.image} /> : null}
            </View>
        )
    }

    return (
        <ScrollView nestedScrollEnabled={true} contentContainerStyle={{justifyContent: 'space-between'}} style={{flex: 1, marginHorizontal: 20}}>
            {props.editingEnabled ?
            <>
                <LandmarkTypePickerContainer />
                <Separator style={{marginBottom: 20, opacity: .5}} color="lightgray" />
                <Text style={{color: 'white', marginBottom: 10}}>Description</Text>
                <ScrollView nestedScrollEnabled={true} style={{backgroundColor: 'white', marginBottom: 20}}>
                    <TextInput 
                        multiline={true} 
                        style={[styles.input, {fontSize: 13, marginBottom: 10}]}
                        onChangeText={text => props.setUpdatedLandmark({...props.updatedLandmark, description: text})} 
                        value={props.updatedLandmark?.description}/>
                </ScrollView>
            </>: <EditingDisabledUpperView />}
            {!props.editingEnabled ?
            <CommentsContainer
                toggleLmDetails={props.toggleLmDetails}
                authNavigation={props.authNavigation}
                setKeyboardOpened={props.setKeyboardOpened}
                keyboardOpened={props.keyboardOpened}
                comments={props.comments}
                focusComment={props.focusComment}
                focusedCommentId={props.focusedCommentId}
                commentListRef={props.commentListRef}
                commentTextInputRef={props.commentTextInputRef}
                commentBeingEdited={props.commentBeingEdited}
                addComment={props.addComment}
                setCommentBeingEdited={props.setCommentBeingEdited}
                setNewComment={props.setNewComment}
                newCommentId={props.newCommentId}
                editComment={props.editComment}
                startEditingComment={props.startEditingComment}
                deleteComment={props.deleteComment} /> : null}
            {!props.editingEnabled && !props.keyboardOpened ?
            <LandmarkPhotos 
                profileId={props.profileId}
                deletePhotoStatus={props.deletePhotoStatus}
                addPhotoStatus={props.addPhotoStatus}
                tryDeletePhoto={props.tryDeletePhoto}
                addPhoto={props.addPhoto}
                toggleLmDetails={props.toggleLmDetails}
                editingEnabled={props.editingEnabled}
                setUpdatedLandmark={props.setUpdatedLandmark}
                updatedLandmark={props.updatedLandmark}
                landmark={props.landmark}
                setSelectedImage={props.setSelectedImage}
                processingPhoto={props.processingPhoto}
                setProcessingPhoto={props.setProcessingPhoto}/>
             : null}
            
        </ScrollView>
    )
}

const styles = StyleSheet.create({
    input: {
        padding: 5,
        color: 'black'
    },
    commentContainer: {
        flex: 5,
        marginBottom: 40,
    },
})
