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

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

    // shifts message list by a given value
    function shiftList({ targetList, sv }: { targetList: NodeList | undefined; sv: number | undefined }) {
        if (targetList) {
            for (const element of targetList) {
                const el = element.parentNode as HTMLElement;
                anime({
                    targets: el,
                    transform: `translate(0 ${sv})`,
                    easing: "easeInOutQuad",
                    duration: 500,
                });
            }
        }
    }

    // adds new message at the bottom of the list and shifts existing message list
    const shiftAnimate: MessageAnimeFunc = (el, transform, shiftValue, targetList) => {
        anime({
            targets: el,
            transform: transform.initialTranslate,
            easing: "easeInOutQuad",
            duration: 500,
            begin: function() {
                shiftList({
                    targetList,
                    sv: shiftValue
                });
            },
            complete: function() {
                anime({
                    targets: el,
                    transform: transform.finalTranslate,
                    easing: "easeInOutQuad",
                    duration: 500,
                    offset: 1000
                });
            }
        });
    }

    // stacks message from top to bottom
    const stackAnimate: MessageAnimeFunc = (el, transform) => {
        anime({
            targets: el,
            transform: transform.initialTranslate,
            easing: "easeInOutQuad",
            duration: 1000,
            complete: function() {
                anime({
                    targets: el,
                    transform: transform.finalTranslate,
                    easing: "easeInOutQuad",
                    duration: 500,
                    offset: 1000
                });
            }
        });
    }

    return {
        shiftAnimate,
        stackAnimate
    };
}