<template>
    <div v-if="isLoading">
        <LoadingComponent />
    </div>
    <div v-else>
        <div class="d-flex justify-content-between">
            <!-- user name and photo zone -->
            <div class="d-flex align-items-center">
                <UserAvatarComponent :user="userActivity" :width=55 :height=55  />
                <div class="ms-3 me-3">
                    <div class="fw-bold">
                        <router-link :to="{ name: 'activity', params: { id: activity.id }}" class="link-body-emphasis link-underline-opacity-0 link-underline-opacity-100-hover" v-if="source === 'home'">
                            {{ activity.name}}
                        </router-link>
                        <span v-if="userActivity">
                            <router-link :to="{ name: 'user', params: { id: userActivity.id }}" class="link-body-emphasis link-underline-opacity-0 link-underline-opacity-100-hover" v-if="source === 'activity'">
                                {{ userActivity.name}}
                            </router-link>
                        </span>
                        <span v-else>
                            {{ $t("activitySummaryComponent.userNameHidden") }}
                        </span>
                    </div>
                    <h6>
                        <!-- Display the visibility of the activity -->
                        <span v-if="activity.visibility == 0">
                            <font-awesome-icon :icon="['fas', 'globe']"/> {{ $t("activitySummaryComponent.visibilityPublic") }}
                        </span>
                        <span v-if="activity.visibility == 1">
                            <font-awesome-icon :icon="['fas', 'users']" v-if="activity.visibility == 1" /> {{ $t("activitySummaryComponent.visibilityFollowers") }}
                        </span>
                        <span v-if="activity.visibility == 2">
                            <font-awesome-icon :icon="['fas', 'lock']" v-if="activity.visibility == 2" /> {{ $t("activitySummaryComponent.visibilityPrivate") }}
                        </span>
                        <span> - </span>

                        <!-- Display the activity type -->
                        <span>
                            <font-awesome-icon class="me-1" :icon="getIcon(activity.activity_type)" />
                            <span v-if="activity.activity_type == 3">{{ $t("activitySummaryComponent.labelVirtual") }}</span>
                        </span>

                        <!-- Display the date and time -->
                        <span>{{ formatDateMed(activity.start_time) }}</span> @
                        <span>{{ formatTime(activity.start_time) }}</span>
                        <!-- Conditionally display city and country -->
                        <span v-if="activity.town || activity.city || activity.country">
                            - 
                            <span>{{ formatLocation(activity) }}</span>
                        </span>
                    </h6>
                </div>
            </div>
            <div class="dropdown d-flex" v-if="activity.user_id == authStore.user.id">
                <a class="btn btn-link btn-lg link-body-emphasis" :href="`https://www.strava.com/activities/${activity.strava_activity_id}`" role="button" v-if="activity.strava_activity_id">
                    <font-awesome-icon :icon="['fab', 'fa-strava']" />
                </a>
                <a class="btn btn-link btn-lg link-body-emphasis" :href="`https://connect.garmin.com/modern/activity/${activity.garminconnect_activity_id}`" role="button" v-if="activity.garminconnect_activity_id">
                    <img src="/src/assets/garminconnect/Garmin_Connect_app_1024x1024-02.png" alt="Garmin Connect logo" height="22" />
                </a>
                <div v-if="source === 'activity'">
                    <button class="btn btn-link btn-lg link-body-emphasis" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <font-awesome-icon :icon="['fas', 'fa-ellipsis-vertical']" />
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#editActivityModal">
                                {{ $t("activitySummaryComponent.buttonEditActivity") }}
                            </a>
                        </li>
                        <li><hr class="dropdown-divider"></li>
                        <li>
                            <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#deleteActivityModal">
                                {{ $t("activitySummaryComponent.buttonDeleteActivity") }}
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Modal edit activity -->
        <EditActivityModalComponent :activity="activity" @activityEditedFields="updateActivityFieldsOnEdit"/>

        <!-- Modal delete activity -->
        <ModalComponent modalId="deleteActivityModal" :title="t('activitySummaryComponent.buttonDeleteActivity')" :body="`${t('activitySummaryComponent.modalDeleteBody1')}<b>${activity.name}</b>?<br>${t('activitySummaryComponent.modalDeleteBody2')}`" :actionButtonType="`danger`" :actionButtonText="t('activitySummaryComponent.buttonDeleteActivity')" @submitAction="submitDeleteActivity"/>

        <!-- Activity title -->
        <h1 class="mt-3" v-if="source === 'activity'">
            {{ activity.name }}
        </h1>

        <!-- Activity description -->
        <p v-if="activity.description">{{ activity.description }}</p>

        <!-- Activity summary -->
        <div class="row mt-3 align-items-center text-start">
            <!-- distance -->
            <div class="col" v-if="activity.activity_type != 10 && activity.activity_type != 14 && activity.activity_type != 18 && activity.activity_type != 19 && activity.activity_type != 20 && activity.activity_type != 21 && activity.activity_type != 22 && activity.activity_type != 23 && activity.activity_type != 24 && activity.activity_type != 25 && activity.activity_type != 26">
                <span class="fw-lighter">
                    {{ $t("activitySummaryComponent.activityDistance") }}
                </span>
                <br>
                <span>{{ formatDistance(activity, authStore.user.units) }}</span>
            </div>
            <!-- calories -->
            <div class="col" v-else>
                <span class="fw-lighter">
                    {{ $t("activitySummaryComponent.activityCalories") }}
                </span>
                <br>
                <span>{{ formatCalories(activity.calories) }}</span>
            </div>
            <!-- activity time-->
            <div class="col border-start border-opacity-50">
                <span class="fw-lighter">
                    {{ $t("activitySummaryComponent.activityTime") }}
                </span>
                <br>
                <span>{{ calculateTimeDifference(activity.start_time, activity.end_time) }}</span>
            </div>
            <div class="col border-start border-opacity-50">
                <!-- elevation -->
                <div v-if="activity.activity_type != 1 && activity.activity_type != 2 && activity.activity_type != 3 && activity.activity_type != 8 && activity.activity_type != 9 && activity.activity_type != 10 && activity.activity_type != 13 && activity.activity_type != 14 && activity.activity_type != 18 && activity.activity_type != 19 && activity.activity_type != 20 && activity.activity_type != 21 && activity.activity_type != 22 && activity.activity_type != 23 && activity.activity_type != 24 && activity.activity_type != 25 && activity.activity_type != 26">
                    <span class="fw-lighter">
                        {{ $t("activitySummaryComponent.activityElevationGain") }}
                    </span>
                    <br>
                    <span>{{ formatElevation(activity.elevation_gain, authStore.user.units) }}</span>
                </div>
                <!-- pace -->
                <div v-else-if="activity.activity_type != 10 && activity.activity_type != 14 && activity.activity_type != 18 && activity.activity_type != 19 && activity.activity_type != 20 && activity.activity_type != 21 && activity.activity_type != 22 && activity.activity_type != 23 && activity.activity_type != 24 && activity.activity_type != 25 && activity.activity_type != 26">
                    <span class="fw-lighter">
                        {{ $t("activitySummaryComponent.activityPace") }}
                    </span>
                    <br>
                    {{ formatPace(activity, authStore.user.units) }}
                </div>
                <!-- avg_hr -->
                <div v-else>
                    <span class="fw-lighter">
                    {{ $t("activitySummaryComponent.activityAvgHR") }}
                    </span>
                    <br>
                    <span>{{ formatHr(activity.average_hr) }}</span>
                </div>
            </div>
        </div>        
        <div class="row d-flex mt-3" v-if="source === 'activity' && activity.activity_type != 10 && activity.activity_type != 14 && activity.activity_type != 18 && activity.activity_type != 19 && activity.activity_type != 20 && activity.activity_type != 21 && activity.activity_type != 22 && activity.activity_type != 23 && activity.activity_type != 24 && activity.activity_type != 25 && activity.activity_type != 26">
            <!-- avg_power running and cycling activities-->
            <div class="col" v-if="activity.activity_type == 1 || activity.activity_type == 2 || activity.activity_type == 3 || activity.activity_type == 4 || activity.activity_type == 5 || activity.activity_type == 6 || activity.activity_type == 7 || activity.activity_type == 27">
                <span class="fw-lighter">
                    {{ $t("activitySummaryComponent.activityAvgPower") }}
                </span>
                <br>
                <span>{{ formatPower(activity.average_power) }}</span>
            </div>
            <!-- avg_hr not running and cycling activities-->
            <div class="col" v-if="activity.activity_type != 1 && activity.activity_type != 2 && activity.activity_type != 3 && activity.activity_type != 4 && activity.activity_type != 5 && activity.activity_type != 6 && activity.activity_type != 7 && activity.activity_type != 27">
                <span class="fw-lighter">
                    {{ $t("activitySummaryComponent.activityAvgHR") }}
                </span>
                <br>
                <span>{{ formatHr(activity.average_hr) }}</span>
            </div>
            <!-- max_hr not running and cycling activities-->
            <div class="col border-start border-opacity-50" v-if="activity.activity_type != 1 && activity.activity_type != 2 && activity.activity_type != 3 && activity.activity_type != 4 && activity.activity_type != 5 && activity.activity_type != 6 && activity.activity_type != 7 && activity.activity_type != 27">
                <span class="fw-lighter">
                    {{ $t("activitySummaryComponent.activityMaxHR") }}
                </span>
                <br>
                <span>{{ formatHr(activity.max_hr) }}</span>
            </div>
            <!-- ele gain running activities -->
            <div class="col border-start border-opacity-50" v-if="activity.activity_type == 1 || activity.activity_type == 2 || activity.activity_type == 3">
                <span class="fw-lighter">{{ $t("activitySummaryComponent.activityEleGain") }}</span>
                <br>
                <span>{{ formatElevation(activity.elevation_gain, authStore.user.units) }}</span>
            </div>
            <!-- avg_speed cycling activities -->
            <div class="col border-start border-opacity-50" v-if="activity.activity_type == 4 || activity.activity_type == 5 || activity.activity_type == 6 || activity.activity_type == 7 || activity.activity_type == 27">
                <span class="fw-lighter">
                    {{ $t("activitySummaryComponent.activityAvgSpeed") }}
                </span>
                <br>
                <span>{{ formatAverageSpeed(activity, authStore.user.units) }}</span>
            </div>
            <!-- calories -->
            <div class="col border-start border-opacity-50">
                <span class="fw-lighter">
                    {{ $t("activitySummaryComponent.activityCalories") }}
                </span>
                <br>
                <span>{{ formatCalories(activity.calories) }}</span>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted, computed } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
// Importing the stores
import { useAuthStore } from "@/stores/authStore";
import { useServerSettingsStore } from "@/stores/serverSettingsStore";
// Import Notivue push
import { push } from "notivue";
// Importing the components
import LoadingComponent from "@/components/GeneralComponents/LoadingComponent.vue";
import UserAvatarComponent from "@/components/Users/UserAvatarComponent.vue";
import EditActivityModalComponent from "@/components/Activities/Modals/EditActivityModalComponent.vue";
import ModalComponent from "@/components/Modals/ModalComponent.vue";
// Importing the services
import { users } from "@/services/usersService";
import { activities } from "@/services/activitiesService";
// Importing the utils
import {
	formatDistance,
	formatElevation,
	formatPace,
	formatHr,
	formatCalories,
	getIcon,
	formatLocation,
    formatAverageSpeed,
    formatPower,
} from "@/utils/activityUtils";
import {
	formatDateMed,
	formatTime,
	calculateTimeDifference,
} from "@/utils/dateTimeUtils";

export default {
	components: {
		LoadingComponent,
		UserAvatarComponent,
		EditActivityModalComponent,
        ModalComponent,
	},
	props: {
		activity: {
			type: Object,
			required: true,
		},
		source: {
			type: String,
			required: true,
		},
        units: {
            type: Number,
            default: 1,
        },
	},
	emits: ["activityEditedFields"],
	setup(props, { emit }) {
		const router = useRouter();
		const authStore = useAuthStore();
        const serverSettingsStore = useServerSettingsStore();
		const { t } = useI18n();
		const isLoading = ref(true);
		const userActivity = ref(null);

		onMounted(async () => {
			try {
                if (authStore.isAuthenticated) {
                    userActivity.value = await users.getUserById(props.activity.user_id);
                } else {
                    if (serverSettingsStore.serverSettings.public_shareable_links_user_info) {
                        userActivity.value = await users.getPublicUserById(props.activity.user_id);
                    }
                }
			} catch (error) {
				push.error(`${t("activitySummaryComponent.errorFetchingUserById")} - ${error}`);
			} finally {
				isLoading.value = false;
			}
		});

		async function submitDeleteActivity() {
			try {
				userActivity.value = await activities.deleteActivity(props.activity.id);
				return router.push({
					path: "/",
					query: { activityDeleted: "true", activityId: props.activity.id },
				});
			} catch (error) {
				push.error(`${t("activitySummaryComponent.errorDeletingActivity")} - ${error}`);
			}
		}

		function updateActivityFieldsOnEdit(data) {
			// Emit the activityEditedFields event to the parent component
			emit("activityEditedFields", data);
		}

		return {
			authStore,
			isLoading,
			t,
			userActivity,
			formatDateMed,
			formatTime,
			calculateTimeDifference,
			submitDeleteActivity,
			updateActivityFieldsOnEdit,
            getIcon,
            formatLocation,
            formatDistance,
            formatCalories,
            formatElevation,
            formatPace,
            formatAverageSpeed,
            formatHr,
            formatPower,
		};
	},
};
</script>