<script>
    import "$lib/css/base.css";
    import "$lib/css/hover-card.css";

    import anime from "animejs";
    import { compile } from "svelte/compiler";
    import SvgIcon from "@jamescoyle/svelte-icon";
    import { mdiEye } from "@mdi/js";

    import text from "$lib/json/hover-card.json";

    export let picture;
    export let title = "Title";
    export let description =
        "This is a description, you can add some explaination to your picture in here!";

    let divHoverCardOverlay;
    let divHoverCardMetadata = {
        div: null,
        title: null,
        description: null,
        tip: null,
    };
    function animateCard(isEntering) {
        const opacityValues = [0, 1];
        let translateValues = [-30, 0];

        if (!isEntering) {
            opacityValues.reverse();
            translateValues.reverse();
        }

        anime({
            targets: [divHoverCardOverlay, divHoverCardMetadata.div],
            opacity: opacityValues,
            duration: 400,
            easing: "easeInOutQuad",
        });
        anime({
            targets: [divHoverCardMetadata.title, divHoverCardMetadata.tip],
            opacity: opacityValues,
            translateX: translateValues,
            delay: 100,
            duration: 500,
            easing: "easeInOutQuad",
        });
        translateValues = translateValues.map((e) => -e);
        anime({
            targets: [divHoverCardMetadata.description],
            opacity: opacityValues,
            translateY: translateValues,
            delay: 100,
            duration: 500,
            easing: "easeInOutQuad",
        });
    }
</script>

<div
    class="hover-card-container"
    role="button"
    tabindex="0"
    on:mouseenter={() => {
        animateCard(true);
    }}
    on:mouseleave={() => {
        animateCard(false);
    }}
>
    <div class="hover-card">
        <img alt="hover-card" src={picture} />
    </div>
    <div class="hover-card-overlay" bind:this={divHoverCardOverlay}></div>
    <div class="hover-card flex-col">
        <div
            class="hover-card-tip flex-row"
            bind:this={divHoverCardMetadata.tip}
        >
            <SvgIcon type="mdi" path={mdiEye}></SvgIcon>
            <span>{text.seemore}</span>
        </div>
        <div
            class="hover-card-metadata margin-bot-force"
            bind:this={divHoverCardMetadata.div}
        >
            <h1 bind:this={divHoverCardMetadata.title}>{title}</h1>
            <p bind:this={divHoverCardMetadata.description}>{description}</p>
        </div>
    </div>
</div>
