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

    import anime from "animejs";
    import SvgIcon from "@jamescoyle/svelte-icon";
    import { mdiEye, mdiMapMarker } from "@mdi/js";
    import { popupComponent } from "$lib/ts/popup.ts";
    import HoverCardPopup from "$lib/components/popup/hover-card.svelte";

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

    export let picture;
    export let picturefull;
    export let title = "Title";
    export let localisation = "Paris, France";
    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,
        localisation: 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.localisation],
            opacity: opacityValues,
            translateY: translateValues,
            delay: 100,
            duration: 500,
            easing: "easeInOutQuad",
        });
    }

    function showPopup() {
        popupComponent.set({
            component: HoverCardPopup,
            props: {
                title: title,
                localisation: localisation,
                description: description,
                picture: picturefull,
            },
        });
    }
</script>

<div
    class="hover-card-container"
    role="button"
    tabindex="0"
    on:mouseenter={() => {
        animateCard(true);
    }}
    on:mouseleave={() => {
        animateCard(false);
    }}
    on:click={showPopup}
    on:keydown={(e) => e.key === "Enter" && showPopup()}
>
    <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>
            <div bind:this={divHoverCardMetadata.localisation} class="flex align-center">
                <SvgIcon type="mdi" path={mdiMapMarker}></SvgIcon>
                <p>{localisation}</p>
            </div>
        </div>
    </div>
</div>
