import AnimeFunc from "@/types/animejs/index";
import {inject} from "vue";
import {Ref} from "@/types/vueRef/index";
export default function useInputAnims() {

    // imports animejs safely
    let anime: AnimeFunc;
    const animeInject: AnimeFunc | undefined = inject("animejs");
    if (animeInject) anime = animeInject;
    
    const animateSend = (el: HTMLElement, elHeight: number, input: Ref<string>) => {
      anime({
        targets: el,
        translateY: -elHeight + 15,
        duration: 200,
        easing: "easeInQuad",
        complete: function() {
          anime({
            targets: el,
            translateY: 50,
            duration: 200,
            easing: "easeOutQuad",
            complete: function () {
              input.value = "";
            }
          })
        }
      })
    }

    const inputAppear = (el: HTMLElement) => {
        anime({
          targets: el,
          translateY: -10,
        });
    }

    const verticalShiftInput = (el: HTMLElement, yTrans: number) => {
        anime({
          targets: el,
          translateY: yTrans,
          easing: "easeOutQuad",
          duration: 150,
        });
    }

    return {
      animateSend,
      verticalShiftInput,
      inputAppear
    }

}