import { FontAwesome } from "@expo/vector-icons";
import React from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
import { Landmark } from "../../../../hooks/useLandmarks";
import { UserProfile } from "../../../../hooks/useProfile";
import { authStore } from "../../../../stores/AuthStore";

interface DetailsHeaderProps {
    landmark?: Landmark,
    editingEnabled: boolean,
    toggleEditing: (state: boolean) => void,
    updatedLandmark?: Landmark,
    editLandmark: () => void,
    removeLandmark: () => void,
    toggleDetailsPanel: (state: boolean) => void,
    landmarkRatedByUser: boolean,
    profile?: UserProfile,
    rateLandmark: (rating: 1 | -1) => void
}

/**
 * Component that renders the landmark details panel header
 * @param 
 */
 export const DetailsHeader: React.FC<DetailsHeaderProps> = (props) => {
    const HeaderContent: React.FC = () => {
        // landmark is owned by user
        if (authStore.userId == props.landmark?.user) {
            // editing is enabled
            if (props.editingEnabled) { 
                return (
                    <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: "center", width: '100%'}}>
                        <FontAwesome color="white" size={25} name="close" onPress={() => props.toggleEditing(false)}/>
                        {props.updatedLandmark?.description && props.updatedLandmark.landmark_type ? // only display check if fields are populated
                        <FontAwesome style={{marginTop: 2}} size={25} color="white" name="check" onPress={async () => props.editLandmark()}/> : null}
                    </View>
                )
            }
            // editing is disabled
            else { 
                return (
                    <View style={{flexDirection: 'row', alignItems: "center", justifyContent: 'space-between', width: '100%'}}>
                        <View style={{flexDirection: 'row', alignItems: "center"}}>
                            <FontAwesome style={{marginRight: 20, marginTop: 2}} size={25} color="white" name="edit" onPress={() => props.toggleEditing(true)}/> 
                            <FontAwesome style={{marginBottom: 2}} color="white" size={25} name="trash" onPress={async () => props.removeLandmark()}/>
                            <Text style={{color: 'white', fontSize: 20, marginTop: 2, marginLeft: 40}} >{props.landmark?.rating}</Text> 
                            <FontAwesome style={{marginLeft: 5, marginBottom: 2, marginRight: 10}} color="white" size={25} name="thumbs-up"/>
                        </View>
                        <FontAwesome color="white" size={25} style={{ }} name="close" onPress={() => props.toggleDetailsPanel(false)}/> 
                    </View>
                )
            }
        }
        // landmark is not owned by user
        else {
            return (
                <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: "center", width: '100%'}}>
                    {props.landmarkRatedByUser ?  // landmark has already been liked by the current user
                    <View style={{flexDirection: 'row'}} > 
                        <Text style={{color: 'white', fontSize: 20, marginTop: 2}} >{props.landmark.rating}</Text> 
                        <FontAwesome style={{marginLeft: 5, marginTop: 2, marginRight: 30}} color="white" size={25} name="thumbs-up"/>
                        <Text style={{color: 'lightgray', fontSize: 20, marginTop: 2, opacity: 0.7}} >You liked this </Text>
                        <TouchableOpacity style={{flexDirection: 'row'}} onPress={() => props.rateLandmark(-1)}>
                            <Text style={{color: 'white', fontSize: 20, marginTop: 2, opacity: 0.8}} >(</Text>
                            <Text style={{color: 'white', fontSize: 20, marginTop: 2, opacity: 0.8, textDecorationLine: "underline"}} >Undo</Text>
                            <Text style={{color: 'white', fontSize: 20, marginTop: 2, opacity: 0.8}} >)</Text>
                        </TouchableOpacity>
                    </View> : // landmark has not been liked by user
                    <TouchableOpacity onPress={async () => { //this touchable will add a like to this landmark
                            if (props.profile?.id !== props.landmark?.id) {
                                await props.rateLandmark(1);
                            }
                        }}>
                        <View style={{flexDirection: 'row'}} >
                            <Text style={{color: 'white', fontSize: 20, marginTop: 2}} >{props.landmark?.rating}</Text>
                            <FontAwesome style={{marginLeft: 5, marginTop: 2}} color="white" size={25} name="thumbs-up"/>
                        </View>
                    </TouchableOpacity>}
                    <FontAwesome color="white" size={25} name="close" onPress={() => props.toggleDetailsPanel(false)}/> 
                </View>
            )
        }
    }

    return (
        <View style={styles.detailsHeader}>
            <HeaderContent />
        </View>
    )
}

const styles = StyleSheet.create({
    detailsHeader: {
        borderBottomWidth: 1,
        borderColor: 'white',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: '#df3f3f',
        marginBottom: 10,
        paddingVertical: 10,
        paddingHorizontal: 20
    },
})