<template>
	<Dialog v-model:visible="visible" modal pt:root:class="border-none" pt:mask:style="backdrop-filter: blur(2px)" @hide="closeCallback">
		<template #container="{ closeCallback }">
			<div class="flex flex-col relative max-w-md w-full text-sm rounded-md">
				<div class="flex flex-col gap-1 justify-center p-9">
					<template v-for="(sv, svid) in props.photo.size_variants" :key="`sv-${svid}`">
						<Button
							v-if="sv?.locale && isDownloadable(sv.type)"
							severity="contrast"
							class="w-full dark:border-surface-900"
							@click="download(sv.type)"
						>
							<i class="pi pi-cloud-download"></i> {{ sv?.locale }} - {{ sv?.width }}x{{ sv?.height }} ({{ sv?.filesize }})
						</Button>
					</template>
					<template v-if="props.photo.precomputed.is_livephoto">
						<Button severity="contrast" class="w-full dark:border-surface-900" @click="download(7)">
							<i class="pi pi-cloud-download"></i> {{ $t("gallery.live_video") }} - {{ props.photo.preformatted.resolution }}
						</Button>
					</template>
				</div>
				<div class="flex justify-center">
					<Button severity="secondary" class="w-full font-bold border-none rounded-none rounded-b-xl" @click="closeCallback">
						{{ $t("dialogs.button.close") }}
					</Button>
				</div>
			</div>
		</template>
	</Dialog>
</template>
<script setup lang="ts">
import { usePhotoRoute } from "@/composables/photo/photoRoute";
import PhotoService from "@/services/photo-service";
import { useLycheeStateStore } from "@/stores/LycheeState";
import { storeToRefs } from "pinia";
import Button from "primevue/button";
import Dialog from "primevue/dialog";
import { useRouter } from "vue-router";

const router = useRouter();
const { getParentId } = usePhotoRoute(router);

const lycheeState = useLycheeStateStore();
const {
	is_thumb_download_enabled,
	is_thum2x_download_enabled,
	is_small_download_enabled,
	is_small2x_download_enabled,
	is_medium_download_enabled,
	is_medium2x_download_enabled,
} = storeToRefs(lycheeState);

const props = defineProps<{
	photo: App.Http.Resources.Models.PhotoResource;
}>();

const visible = defineModel("visible", { default: false });

function closeCallback() {
	visible.value = false;
}

// prettier-ignore
function svtoVariant(sv: number): App.Enum.DownloadVariantType {
	switch (sv) {
		case 0: return "ORIGINAL";
		case 1: return "MEDIUM2X";
		case 2: return "MEDIUM";
		case 3: return "SMALL2X";
		case 4: return "SMALL";
		case 5: return "THUMB2X";
		case 6: return "THUMB";
		default: return "LIVEPHOTOVIDEO";
	}
}

// prettier-ignore
function isDownloadable(sv: number): boolean {
	switch (sv) {
		case 0: return true;
		case 1: return is_medium2x_download_enabled.value;
		case 2: return is_medium_download_enabled.value;
		case 3: return is_small2x_download_enabled.value;
		case 4: return is_small_download_enabled.value;
		case 5: return is_thum2x_download_enabled.value;
		case 6: return is_thumb_download_enabled.value;
		case 7: return false; // Placeholder = string => not downloadable.
		default: return true;
	}
}

function download(sv: number) {
	PhotoService.download([props.photo.id], getParentId(), svtoVariant(sv));
}
</script>
