<script>
	import "$lib/css/base.css";
	import "$lib/css/link.css";
	import { hexTorgb, darkenHexTorgb } from "$lib/ts/color.ts";

	import SvgIcon from "$lib/components/svg-icon-custom.svelte";
	import { mdiChevronRight } from "@mdi/js";
	import anime from "animejs";

	let color = "9A031E";
	const color_rgb = hexTorgb(color);
	const color_darken = darkenHexTorgb(color, 0.8);
	let imgBase = "placeholder_link.png";
	let imgHover = "placeholder_link_hover.png";
	let base;
	let hover;

	let span_link;
	let svg_icon;
	let div_background;
	let span_width = "0%";

	async function enter() {
		span_width = "100%";
		span_link.style.color = "var(--color-background)";
		svg_icon.svgElement.style.color = "var(--color-background)";
		svg_icon.svgElement.style.transform = "translateX(8px)";
		updatePicture(false, base);
		updatePicture(true, hover);
		updatePicture(true, div_background);
	}

	async function leave() {
		span_width = "0%";
		span_link.style.color = "var(--color-text)";
		svg_icon.svgElement.style.color = "var(--color-text)";
		svg_icon.svgElement.style.transform = "";
		updatePicture(true, base);
		updatePicture(false, hover);
		updatePicture(false, div_background);
	}

	function updatePicture(show, img) {
		const targetOpacity = show ? 1 : 0;

		anime({
			targets: img,
			opacity: [1 - targetOpacity, targetOpacity],
			duration: 400,
			easing: "easeInOutQuad",
		});
	}
</script>

<div
	style="--shadow: rgba({color_rgb.r}, {color_rgb.g}, {color_rgb.b}, 0.4) 0px 30px 60px -12px, rgba({color_darken.r}, {color_darken.g}, {color_darken.b}, 0.3) 0px 18px 36px -18px; --gradient: linear-gradient(180deg, #{color} 0%, rgba({color_darken.r},{color_darken.g}, {color_darken.b}, 1) 100%); --span-width: {span_width};"
	class="link-container"
	on:mouseenter={enter}
	on:mouseleave={leave}
	role="button"
	tabindex="0"
>
	<div class="link-background" bind:this={div_background}></div>
	<div class="link-content flex-row center">
		<div class="link-img">
			<img bind:this={base} alt="base" src={imgBase} />
			<img
				bind:this={hover}
				alt="hover"
				class="link-img-hover"
				src={imgHover}
			/>
		</div>
		<span bind:this={span_link}>Link</span>
		<SvgIcon
			type="mdi"
			path={mdiChevronRight}
			size={80}
			bind:this={svg_icon}
		></SvgIcon>
	</div>
</div>
