<script setup lang="ts">
import type { LightboxItem } from './lightbox.types'

import { BglVideo, Btn, Icon, Zoomer, Image, normalizeURL, Carousel, downloadFile } from '@bagelink/vue'
import { watch } from 'vue'

let isOpen = $ref(false)
let group = $ref<LightboxItem[]>([])
let currentIndex = $ref(0)
let currentItem = $computed<LightboxItem>(() => group[currentIndex])

function open(item: LightboxItem, groupItems?: LightboxItem[]) {
	isOpen = true
	group = groupItems || [item]
	currentIndex = group.findIndex(({ src }) => item.src === src)
	document.addEventListener('keydown', handleKeydown)
}

function close() {
	isOpen = false
	document.removeEventListener('keydown', handleKeydown)
}

function next() {
	if (group.length > 1) {
		currentIndex = (currentIndex + 1) % group.length
		currentItem = group[currentIndex]
	}
}

function prev() {
	if (group.length > 1) {
		currentIndex = (currentIndex - 1 + group.length) % group.length
		currentItem = group[currentIndex]
	}
}

function selectItem(index: number) {
	currentIndex = index
	currentItem = group[index]
}

watch(() => isOpen, (val) => {
	if (val) document.body.style.overflow = 'hidden'
	else document.body.style.overflow = ''
})

function handleKeydown(event: KeyboardEvent) {
	if (event.key === 'Escape') {
		close()
	} else if (event.key === 'ArrowLeft') {
		prev()
	} else if (event.key === 'ArrowRight') {
		next()
	}
}

const zoom = $ref(1)

function clickOutside() {
	if (zoom === 1) close()
}

defineExpose({ open, close })
</script>

<template>
	<transition name="fade">
		<div
			v-if="isOpen"
			class="bgl-lightbox-overlay fixed w-100 h-100 flex justify-content-center z-9999 inset mx-auto"
			@keydown.esc="close"
			@keydown.left="prev"
			@keydown.right="next"
			@click="clickOutside"
		>
			<div v-if="group && group.length > 1" class="navigation flex space-between px-3 w-100 absolute m_px-1 m_none z-9">
				<Btn
					class="oval opacity-8"
					icon="arrow_back"
					color="black"
					@click="prev"
				/>

				<Btn
					class="oval opacity-8"
					icon="arrow_forward"
					color="black"
					@click="next"
				/>
			</div>
			<div class="bgl-lightbox relative txt-center" @click.stop>
				<div class="flex start fixed top-1 w-100 space-between px-1">
					<Btn flat class="color-white" icon="close" @click="close" />
					<div v-if="currentItem?.enableZoom && currentItem?.type === 'image'" class="center">
						<Btn flat class="color-white" icon="remove" :disabled="zoom === 1" @click="zoom--" />
						<Btn flat class="color-white" icon="zoom_in" :disabled="zoom === 1" @click="zoom = 1" />
						<Btn flat class="color-white" icon="add" :disabled="zoom === 3" @click="zoom++" />
					</div>
					<Btn
						v-if="currentItem?.openFile && currentItem?.src" class="color-white" round thin flat iconEnd="arrow_outward"
						value="Open File"
						:href="currentItem?.src"
						target="_blank"
					/>
					<Btn
						v-if="currentItem?.download && currentItem?.src" class="color-white" round thin flat icon="download"
						value="Download File"
						@click="downloadFile(currentItem?.src)"
					/>
					<div v-if="!currentItem?.openFile && !currentItem?.download" />
				</div>

				<Carousel v-model:index="currentIndex" :items="1" class="bgl-lightbox-item" :class="{ zoomed: zoom > 1 }" :freeDrag="zoom === 1">
					<template v-for="item in group" :key="item.src">
						<Zoomer v-if="item.type === 'image'" v-model:zoom="zoom" :disabled="!item?.enableZoom" :mouse-wheel-to-zoom="false">
							<Image :draggable="false" :src="item?.src" alt="Preview" class="vw90 lightbox-image" />
						</Zoomer>

						<BglVideo
							v-else-if="item?.type === 'video' && item?.src"
							:src="item?.src"
							autoplay
							controls
							class="vw90"
						/>

						<div
							v-else-if="item?.type === 'pdf' && item?.src"
							class="vw90"
						>
							<embed
								:src="normalizeURL(item?.src)"
								type="application/pdf"
								width="100%"
								height="1080"
								:title="item?.name"
								class="vw90"
							>
						</div>
						<div v-else class="vw90">
							<div class="file-info txt-white flex m_block align-items-start gap-025">
								<Icon class="m-0 m_none" icon="draft" :size="10" weight="12" />
								<Icon class="m-0 none m_block m_-mb-1" icon="draft" :size="4" weight="2" />

								<div class="txt-start">
									<p class="mx-0 light">
										File:
										<span class="semi word-break-all ">
											{{ item?.name }}
										</span>
									</p>
									<p class="mx-0 ">
										Type:
										<span class="semi">
											{{ item?.type }}
										</span>
									</p>
									<Btn :href="item?.src" target="_blank" round thin class="mt-1" value="Open file" />
									<!-- <a :href="currentItem?.src" target="_blank">Open file</a> -->
								</div>
							</div>
						</div>
					</template>
				</Carousel>
				<div
					v-if="group && group.length > 1"
					class="flex justify-content-center mt-2 overflow
					p-1 fixed bottom start end gap-1 m_justify-content-start"
				>
					<template
						v-for="(item, index) in group"
						:key="index"
					>
						<Image
							v-if="item.type === 'image'"
							class="thumbnail object-fit-cover hover
							 opacity-5 rounded flex bg-popup justify-content-center align-items-center flex-shrink-0"
							:src="item.src"
							alt=""
							:class="{ active: currentIndex === index }"
							@click="selectItem(index)"
						/>
						<Icon
							v-else
							class="thumbnail object-fit-cover hover
							 opacity-5 ed flex bg-popup justify-content-center align-items-center flex-shrink-0"
							icon="description"
							:class="{ active: currentIndex === index }"
							@click="selectItem(index)"
						/>
					</template>
				</div>
			</div>
		</div>
	</transition>
</template>

<style>
.bgl-lightbox:has(.bgl_vid) {
	width: 90vw;
}
.bgl-lightbox:has(.vid_short) {
	width: auto;
	aspect-ratio: 9/16;
	height: 90vh;
}
.bgl-lightbox:has(.vid_short) .bgl-lightbox-item * {
    max-height:unset !important;
}
.lightbox-image{
	object-fit: contain;
}

.bgl-lightbox-overlay {
	background: rgba(0, 0, 0, 0.8);
}

.bgl-lightbox {
	max-height: 90%;
}

.bgl-lightbox-item{
	animation: 500ms ease bgl-lightbox-load;
}
@keyframes bgl-lightbox-load {
  from {
    scale:0.7;
  }

  to {
	scale:1;

  }
}

.bgl-lightbox-item * {
	max-height: calc(80vh - 90px);
	border-radius: 3px;
	margin: auto;
	animation: 200ms ease bgl-lightbox-load;
	transition: max-height 200ms ease;
}

.bgl-lightbox-item.zoomed * {
	max-height: calc(100vh - 90px);
	height: calc(100vh - 90px);
}

.navigation {
	top: 50%;
	transform: translateY(-50%);
}

.thumbnail {
	height: 50px;
	width: 50px;
}
.thumbnail:hover {
	opacity: 1;
}
.thumbnail:active {
	opacity: 0.8;
}

.thumbnail.active {
	opacity: 1;
	outline: 2px solid white;
}
.file-info{
	max-width: 420px
}
@media screen and (max-width: 910px) {
	.file-info{
	max-width: 220px;
	text-align: center !important;
}
.file-info *{
	text-align: center !important;
	margin-inline: 0 !important;
	max-width: 100% !important;
}
}
</style>
