/** Biome-ignore-all lint/a11y/useValidAnchor: <explanation> */
/** Biome-ignore-all lint/a11y/useAltText: <explanation> */

import type { HTMLAttributes } from "corvos/plugins/jsx.ts";

import { Icon } from "$/ui/objects/Icon.tsx";

import { ActionButton } from "./ActionButton.tsx";
import { LoadingIndicator } from "./LoadingIndicator.tsx";
import { Thumbnail } from "./Thumbnail.tsx";

export type Props = HTMLAttributes<"dialog">;

export const Lightbox = ({ class: cls, ...props }: Props) => (
	<dialog
		class:list={["o-lightbox o-lightbox--static-black is-modal t-static-white", cls]}
		closedby="any"
		x-id="['lightbox']"
		x-bind:id="$id('lightbox')"
		x-data="lightbox"
		x-on:close="handleClose"
		x-on:touchstart="handleTouchStart"
		x-on:touchend="handleTouchEnd"
		{...{
			"x-on:keydown.document.capture": "handleKeyDown",
		}}
		{...props}
	>
		<div x-show="items.length > 1" class="o-lightbox__info">
			<small class="u-mis-100 u-mie-200 u-d-none@sm-lo">
				<strong x-text="current + 1"></strong> <span class="u-c-mute-more u-mi-50">&#x2044;</span>{" "}
				<strong x-text="items.length"></strong>
			</small>
			<ActionButton
				x-on:click="prev"
				as="button"
				pill
				level="quiet"
				icon={<Icon icon="caret-left" variant="bold" />}
				variant="static-white"
			/>
			<ActionButton
				x-on:click="next"
				as="button"
				pill
				level="quiet"
				icon={<Icon icon="caret-right" variant="bold" />}
				variant="static-white"
			/>
		</div>

		<div class="o-lightbox__controls">
			<ActionButton
				x-show="zoomedFull"
				x-on:click="toggleZoom"
				as="button"
				class="u-mie-100"
				pill
				level="quiet"
				icon={<Icon icon="magnifying-glass-minus" variant="bold" />}
				variant="static-white"
			/>
			<ActionButton
				x-show="!zoomedFull"
				x-on:click="toggleZoom"
				as="button"
				class="u-mie-100"
				pill
				level="quiet"
				icon={<Icon icon="magnifying-glass-plus" variant="bold" />}
				variant="static-white"
			/>
			<ActionButton
				x-bind:commandfor="$id('lightbox')"
				command="close"
				as="button"
				pill
				level="quiet"
				icon={<Icon icon="x" variant="bold" />}
				variant="static-white"
			/>
		</div>

		<img
			class="o-lightbox__img"
			x-ref="img"
			x-bind:src="currentItem?.src ?? ''"
			x-bind:srcset="currentItem?.srcset ?? ''"
			x-bind:alt="currentItem?.alt ?? ''"
			x-on:load="loading = false"
			x-on:mousemove="handleMouseMove"
			x-on:touchmove="handleTouchMove"
			x-on:dblclick="handleDoubleClick"
			x-bind:class="{ 'is-hidden': loading }"
			x-bind:style="{ transform: `translate(${offsetX}px, ${offsetY}px) scale(${zoom})` }"
			{...{
				"x-on:mousedown.prevent": "handleMouseDown",
				"x-on:mouseup.window": "handleMouseUp",
				"x-on:wheel.prevent": "handleScroll",
			}}
		/>

		<div class="o-lightbox__placeholder">
			<LoadingIndicator />
		</div>

		<div class="o-lightbox__thumbnails" x-show="items.length > 1" x-ref="thumbnails">
			<template x-for="(item, i) in items">
				<Thumbnail
					class="o-lightbox__thumbnail"
					variant="static-white"
					x-bind:src="item.thumbnail ?? item.src"
					x-bind:srcset="item.srcset"
					x-bind:alt="item.alt"
					x-bind:href="item.src"
					x-bind:class="{ 'is-selected': i === current }"
					{...{ "x-on:click.prevent": "current = i" }}
				/>
			</template>
		</div>
	</dialog>
);