import barba from '@barba/core'

import animin from './anims/in'
import animout from './anims/out'

barba.hooks.before(() => {
  barba.wrapper.classList.add('is-animating')
})
barba.hooks.after(() => {
  barba.wrapper.classList.remove('is-animating')
})

barba.init({
  transitions: [
    {
      appear: () => {},
      leave: ({ current }) => {
        // launch your leave animation here on the current container
        return animout(current.container)
      },
      enter: ({ next }) => {
        // launch your enter animation here on the next container
        return animin(next.container)
      },
      beforeLeave: ({ current }) => {
        barba.wrapper.style.height = current.container.offsetHeight + 'px'
      },
      beforeEnter: ({ current, next }) => {
        barba.wrapper.style.height = next.container.offsetHeight + 'px'
        current.container.style.zIndex = -1
        next.container.style.zIndex = 1
        dynamicImportInit(next.namespace)
      },
      beforeAppear: ({ next }) => {
        dynamicImportInit(next.namespace)
      }
    }
  ]
})

const dynamicImportInit = (className) => {
  import(/* webpackChunkName: "[request]" */ `./pages/${className}`).then(module => {
    try {
      const DynamicClass = module.default
      const page = new DynamicClass()
      page.init()
    } catch (err) {
      console.error(err)
    }
  })
}