import { ref, Ref } from "vue";
import anime from "animejs";


export function animateTextInput () {

    const side = ref("right");

    function show () {
        const t1 = (side.value === "right") ? 50 : -70;
        const t2 = (side.value === "right") ? 110 : -130;

        anime({
            targets: '#textInput',
            opacity: [0, 1],
            translateX: [t1, t2],
            scale: [0.3, 1],
            duration: 500,
            easing: 'easeOutExpo',
        })

    }

    function hide () {
        const t = (side.value === "right") ? 50 : -80;

        anime({
            targets: '#textInput',
            opacity: [1, 0],
            translateX: t,
            scale: 0.3,
            duration: 500,
            easing: 'easeOutExpo',
        })

    }

    function switchSide () {
        const t = (side.value === "right") ? -130 : 110;

        anime({
            targets: '#textInput',
            translateX: t,
            duration: 500,
            easing: 'easeOutExpo',
        })

    }

    return {
        side,
        show,
        hide,
        switchSide
    };

}

export function animateAudioInput () {

    function show () {
        anime({
            targets: '#recIcon',
            opacity: [0, 0.75],
            scale: [0.0, 1],
            duration: 250,
            easing: 'linear',
        })
    }

    function hide () {
        anime({
            targets: '#recIcon',
            opacity: [0.75, 0],
            scale: [1, 0],
            duration: 250,
            easing: 'linear',
        })
    }

    return {
        show,
        hide
    };

}

// Given index and length of content, return message child status.
export function calcChild (index: number, len: number) 
{
  if (len === 1) 
  {
    return "none";
  } 
  else if (index === 0) 
  {
    return "first-child";
  } 
  else if (index === len - 1) 
  {
    return "last-child";
  } 
  else 
  {
    return "middle-child";
  }
}