<script lang="ts">
import { browser } from '$app/environment';
import { decode } from 'blurhash';
import { fade, blur } from 'svelte/transition';

export let width: number = 40;
export let height: number = 40;

export let blurhash = 'L05OKRIq00xZs;WUNH%100xt~V%K';

export let src = '';
export let loading: boolean = true;
export let alt = '';

$: !src && (loading = true);

let dataurl;

if (browser) {
const pixels = decode(blurhash, width, height);
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
if (!ctx) throw new Error('Could not get 2d context');
const imageData = ctx.createImageData(width, height);
imageData.data.set(pixels);
ctx.putImageData(imageData, 0, 0);
dataurl = canvas.toDataURL();
}
</script>

<!-- Bounding container , set relative to contain the absolute blurhash -->
<div
style="width: {width}px; height: {height}px;"
class="relative p-0 bg-stone-100 dark:bg-dark-80 m-0 box-border border-none"
>
{#if browser && dataurl}
{#if src}
<!-- Actual image , set to display only on src to avoid ghost border -->
<img
in:blur
{src}
style="width: {width}px; height: {height}px;"
class="w-full h-full transition-all duration-300 ease-in-out object-cover
bg-center bg-no-repeat bg-cover absolute z-10"
{alt}
on:load={() => {
loading = false;
}}
/>
{/if}
{#if loading}
<!-- Placeholder Blurhash , set to display only on loading -->
<img
transition:blur
class="
absolute top-0 left-0 w-full h-full object-cover bg-center bg-no-repeat bg-cover z-10"
style="width: {width}px; height: {height}px;"
src={dataurl}
{alt}
/>
{/if}
<slot>
<!--
This implementation of a Z based overlaying is questionable
TODO: Rewrite this with a svelte action that uses a single image and just alters
the data url of the image to the blurhash and src
-->
</slot>
{/if}
</div>