import { TweenMax, TimelineLite, Sine} from 'gsap/TweenMax'

export default class Slide {

constructor(ele, slider) {
  this.ele = ele
  this.slider = slider

  this.imgPlaceholder = this.ele.getElementsByClassName("slide__img_placehold")[0]
  this.titleInner = this.ele.getElementsByClassName("slide__title_inner")[0]
  this.titleText = this.ele.getElementsByClassName("slide__title_text")[0]
  this.timeInner = this.ele.getElementsByClassName("slide__time_inner")[0]
  this.timeText = this.ele.getElementsByClassName("slide__time_text")[0]
}

reverse () {
  this.timeLine.reverse()
}

reveal () {
  this.show()

  if( this.timeLine ) {
    this.timeLine.restart()
    return
  } 

  this.timeLine = new TimelineLite();

  let easeType = Sine.easeInOut;

  this.timeLine.add( TweenMax.to( this.imgPlaceholder, 0.45, {
    height: 0,
    transform: 'translateY(-100%)',
    ease: easeType,
  }));
  this.timeLine.add( TweenMax.to( this.titleInner, 0.35, {
    ease: easeType,
    width: '100%',
    opacity: 1
  }), '-=0.4');
  this.timeLine.add( TweenMax.to( this.titleText, 0.35, {
    ease: easeType,
    transform: 'translateX(0)',
    opacity: 1
  }), '-=0.3');
  this.timeLine.add( TweenMax.to( this.timeInner, 0.35, {
    ease: easeType,
    width: '100%',
    opacity: 1
  }), '-=0.2')
  this.timeLine.add( TweenMax.to( this.timeText, 0.35, {
    ease: easeType,
    transform: 'translateX(0)',
    opacity: 1
  }), '-=0.15');

  let self = this

  this.timeLine.eventCallback('onReverseComplete', () => {
    self.hide()
    self.slider.move()
  });

  this.timeLine.eventCallback('onStart', function() {
    self.slider.inAnimation = true
  });

  this.timeLine.eventCallback('onComplete', function() {
    self.slider.inAnimation = false
  })
}

hide () {
  this.control.classList.remove("current")
  this.ele.style.opacity = '0'
  this.ele.style.zIndex = '1'
}

show () {
  this.ele.style.opacity = '1'
  this.ele.style.zIndex = '5'
  this.control.classList.add("current") 
}

}