import { inject } from "vue";
import AnimeFunc from "@/types/animejs/index";

/**
 * anime js animations used by message view transitions
 */
export default function useMessageViewAnims() {
    // imports animejs safely
    let anime: AnimeFunc;
    const animeInject: AnimeFunc | undefined = inject("animejs");
    if (animeInject) anime = animeInject;

    // update message View bottom bound
    const shiftView = (el: SVGGElement, transform: string) => {
        anime({
            targets: el,
            transform: transform,
            easing: "easeInOutQuad",
            duration: 500,
        });
    }

    // stacks message from top to bottom
    const stackAnimate = (el: Element, transform: string) => {
        return new Promise((resolve, _reject) => {
            anime({
                targets: el,
                transform: transform,
                easing: "easeInOutQuad",
                duration: 1000,
                complete: function() {
                    resolve();
                }
            });
        })
    }

    // adds new message at the bottom of the list and shifts existing message list
    const shiftAnimate = (el: Element, transform: string, view: SVGGElement, viewTransform: string) => {
        return new Promise((resolve, _reject) => {
            anime({
                targets: el,
                transform: transform,
                easing: "easeInOutQuad",
                duration: 800,
                begin: function() {
                    shiftView(view, viewTransform);
                },
                complete: function() {
                    resolve();
                }
            });
        })
    }

    return {
        shiftAnimate,
        stackAnimate,
    };
}