/* 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 from "react";
import { Alert, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { QueryStatus } from "react-query";
import { useAuth } from "../../../../state/external/auth-provider";
import { Landmark } from "../../../../state/external/landmarks";
import { UserProfile } from "../../../../state/external/profiles";
import { MainTabsNavigationProp } from "../../../../navigation/main-tabs-navigator";
import TouchOpaq from './TouchOpaq';

interface DetailsHeaderProps {
    landmark?: Landmark,
    editingEnabled: boolean,
    toggleEditing: (state: boolean) => void,
    updatedLandmark?: Landmark,
    editLandmark: () => void,
    removeLandmark: () => void,
    toggleDetailsPanel: (state: boolean) => void,
    profile?: UserProfile,
    rateLandmark: (rating: 1 | -1) => void
    processingPhoto: boolean,
    addPhotoStatus: QueryStatus
    deletePhotoStatus: QueryStatus
    ratedByUser: boolean
    authNavigation: MainTabsNavigationProp
    toggleLmDetails: (state: boolean) => void
}

/**
 * Component that renders the landmark details panel header
 * @param 
 */
export const DetailsHeader: React.FC<DetailsHeaderProps> = (props) => {
    const {landmarkOwnedByUser, anonUserId, setAlert} = useAuth()

    const photosAreBusy = () => {
        return props.processingPhoto ||
            props.addPhotoStatus == "loading" ||
            props.deletePhotoStatus == "loading"
    }

    const HeaderContent: React.FC = () => {
        // landmark is owned by user
        if (landmarkOwnedByUser(props.landmark)) {
            // editing is enabled
            if (props.editingEnabled) {
                return (
                    <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: "center", width: '100%' }}>

                        <TouchOpaq
                            func={() => props.toggleEditing(false)}
                            size={25}
                            col={"white"}
                            name={"close"}
                        />

                        {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()} /> 
                            <TouchOpaq
                                func={async () => props.editLandmark()}
                                size={25}
                                col="white"
                                name={"check"}
                            />
                            : null}
                    </View>
                )
            }
            // editing is disabled
            else {
                return (

                    <View style={{ borderColor: 'blue', borderWidth: 0, flexDirection: 'row', alignItems: "center", justifyContent: 'space-between', width: '100%' }}>
                        <View style={{ borderColor: 'green', borderWidth: 0, flexDirection: 'row', alignItems: "center", justifyContent: "flex-end" }}>

                            <TouchOpaq
                                func={() => props.toggleEditing(true)}
                                size={25}
                                col={"white"}
                                name={"edit"}
                            />

                            <TouchOpaq
                                func={() => props.removeLandmark()}
                                size={25}
                                col={"white"}
                                name={"trash"}
                            />

                            <Text style={{ color: 'white', fontSize: 20, marginTop: 2, marginLeft: 10 }} >{props.landmark?.rating}</Text>
                            {/* <Text>Lil Tjay rn</Text> */}

                            <FontAwesome style={{ marginLeft: 5, marginBottom: 2, marginRight: 10 }} color="white" size={25} name="thumbs-up" />
                        </View>

                        <TouchOpaq
                            func={() => props.toggleDetailsPanel(false)}
                            size={25}
                            col={"white"}
                            name={"close"}
                        />



                    </View>
                )
            }
        }
        // landmark is not owned by user
        else {
            return (
                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: "center", width: '100%' }}>
                    {props.ratedByUser ?  // 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 (anonUserId) {
                                setAlert({
                                    title: "Authentication required",
                                    type: "warning",
                                    message: "Oops! In order to rate landmarks, you have to log in.",
                                    callback: () => {props.toggleLmDetails(false); props.authNavigation.navigate("Account")},
                                    callbackButtonText: 'Go to login'
                                });
                            }
                            else if (!landmarkOwnedByUser(props.landmark)) {
                                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>}
                        <TouchOpaq
                            func={() => props.toggleDetailsPanel(false)}
                            col={"white"}
                            size={25}
                            name={"close"}
                        />

                </View>
            )
        }
    }
    return (
        <View style={styles.detailsHeader}>
            {!photosAreBusy() ?
                <HeaderContent />
                : null}
        </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
    },
})