const productList = Vue.component('product-list', {
	template: '#product-list',
  props: {
  	products: {
    	type: Array,
      required: true,
    },
    viewerOpen: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  data() {
    return {
      openProductId: null,
    };
  },
  methods: {
    open(e, product) {
      this.openProductId = product.id;
      const pos = e.target.parentNode.getBoundingClientRect();
      this.$emit('open', {
        product: product,
        bounds: pos,
      });
    },
  },
  watch: {
    viewerOpen(newVal) {
      if(!newVal) {
        // 1450 is the duration of the leave transition
        // doing it shortly before to prevent any jerkiness
        setTimeout(() => {
          this.openProductId = null;  
        }, 1400);        
      }
    },
  },
});

const viewer = Vue.component('viewer', {
  template: '#productviewer',
  props: {
     offsetY: {
       type: Number,
       required: true,
     },
     offsetX: {
       type: Number,
       required: true,
     },
     product: {
       type: Object,
       required: true,
     },
  },
  mounted() {
    console.log('mounted');
  },
  methods: {
    close() {
      console.log('closed');
      this.$emit('close');
    },
  },
  watch: {
    offsetX(newVal) {
      console.log('new val: ', newVal);
    }
  },
});

new Vue({
  el: "#app",
  components: {
  	productList,
    viewer,
  },
  data: {
    viewer: {
      animation: null,
      open: false,
      openTran: null,
      expandTran: null,
      offsetX: 0,
      offsetY: 0,
      initialWidth: 0,
      product: {
        id: '',
      },
    },
    products: [
      {
        id: 'Glue Stick',
        thumb: 'https://via.placeholder.com/400x400',
        images: [
          'https://via.placeholder.com/405x405',
        ],
      },
      {
        id: 'Paper',
        thumb: 'https://via.placeholder.com/200x200',
        images: [
          'https://via.placeholder.com/405x405',
        ],
      },
      {
        id: 'Pencil',
        thumb: 'https://via.placeholder.com/200x200',
        images: [
          'https://via.placeholder.com/405x405',
        ],
      },
    ],
  },
  computed() {
  },
  mounted() {
  },
  methods: {
    close() {
      console.log('closed');
      this.viewer.open = false;
    },
    open({ product, bounds}) {
      this.viewer.product = product;
      this.viewer.offsetY = bounds.top;
      this.viewer.offsetX = bounds.left;
      this.viewer.initialWidth = bounds.width;
      this.viewer.initialHeight = bounds.height;
      this.viewer.open = true;
      
    },
    beforeEnter(el) {
      el.style.top = `${this.viewer.offsetY}px`;
      el.style.left = `${this.viewer.offsetX}px`;
    },
    enter(el, done) {
      const offsetX = this.viewer.offsetX;
      const offsetY = this.viewer.offsetY;
      // slide the product view to the center
      const windowWidth = window.innerWidth;
      const windowHeight = window.innerHeight;
      const windowCenterX = (windowWidth - (this.viewer.initialWidth * 2)) /2;
      const windowCenterY = (windowHeight - (this.viewer.initialHeight * 2)) / 2;
      const ani = anime({
        targets: el,
        top: [this.viewer.offsetY, windowCenterY],
        left: [this.viewer.offsetX, windowCenterX],
        opacity: 1,
        width: `${this.viewer.initialWidth * 2}px`,
        height: `${this.viewer.initialHeight * 2}px`,
        easing: 'easeInOutQuad',
      });

      ani.complete = done;
      
    },
    afterEnter(el) {
      // slide the product view apart
      const ani = anime.timeline();
      ani.add({
        targets: '.viewer-left',
        left: '-50%',
        easing: 'easeInOutCirc',
        offset: 0,
      })
      .add({
        targets: '.viewer-right',
        left: '50%',
        easing: 'easeInOutCirc',
        offset: 0
      });
      
      /* set margin auto, top 0, left 0
        this keeps the box centered on resize
        but can't be used before animation because it prevents
        animating from the product image position */
      ani.complete = function() {
        el.style.cssText += 'margin: auto; top: 0; left: 0;';
      }
      
    },
    enterCancelled() {
    },
    beforeLeave(el) {
      /* remove margin and set top and left back to offsets
      so animation can be done back to product image position */
      const windowWidth = window.innerWidth;
      const windowHeight = window.innerHeight;
      const windowCenterX = (windowWidth - (this.viewer.initialWidth * 2)) /2;
      const windowCenterY = (windowHeight - (this.viewer.initialHeight * 2)) / 2;
      el.style.top = `${windowCenterY}px`
      el.style.left = `${windowCenterY}px`
      el.style.margin = '';
    },
    leave(el, done) {
      const windowWidth = window.innerWidth;
      const windowHeight = window.innerHeight;
      const windowCenterX = (windowWidth - (this.viewer.initialWidth * 2)) /2;
      const windowCenterY = (windowHeight - (this.viewer.initialHeight * 2)) / 2;
      // slide the product view together
      const ani = anime.timeline();
      ani.add({
        targets: '.viewer-left',
        left: 0,
        easing: 'easeInOutCirc',
        duration: 500,
        offset: 0,
      })
      .add({
        targets: '.viewer-right',
        left: 0,
        easing: 'easeInOutCirc',
        duration: 500,
        offset: 0,
      })
      .add({
        targets: '.viewer',
        top: [windowCenterY, this.viewer.offsetY],
        left: [windowCenterX, this.viewer.offsetX],
        width: `${this.viewer.initialWidth}px`,
        height: `${this.viewer.initialHeight}px`,
        easing: 'easeInOutQuad',
        offset: 450,
      });
      
      ani.complete = done;
    },
    afterLeave() {
      
    },
    leaveCancelled() {
      
    },
  },
})