const React = require('react')
const _ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment')

const IS_BROWSER = typeof window === 'object'
const IS_DOM_ABLE = _ExecutionEnvironment.canUseDOM || IS_BROWSER // well that was some big ole unknown breakage

class FlickityComponent extends React.Component {
  constructor(...args) {
    var _temp

    return (
      (_temp = super(...args)),
      (this.state = {
        selectedIndex: 0, // dom ref
      }),
      (this.carousel = null),
      (this.flkty = null),
      (this.updateSelected = () => {
        const index = this.flkty.selectedIndex
        if (this.props.onSwipe) {
          this.props.onSwipe(index)
        }
      }),
      _temp
    )
  } // Flickidy

  componentDidMount() {
    const carousel = this.carousel

    if (IS_DOM_ABLE) {
      const Flickity = require('./fluckity')

      console.log(Flickity) // const Flickity = require('./flickity')

      this.flkty = new Flickity(carousel, this.props.options)
      this.flkty.on('cellSelect', this.updateSelected) // this.imagesLoaded()
    }
  }

  componentDidUpdate() {
    if (this.props.reloadOnUpdate && this.flkty) {
      this.flkty.reloadCells()
    }
  }

  componentWillUnmount() {
    if (this.flkty) {
      this.flkty.off('cellSelect', this.updateSelected)
      this.flkty.destroy()
    }
  }

  render() {
    const props = {
      className: this.props.className,
      ref: node => {
        this.carousel = node
      },
    }
    return React.createElement(
      this.props.elementType,
      props,
      this.props.children
    )
  }
}

FlickityComponent.displayName = 'FlickidyDooFork'
FlickityComponent.defaultProps = {
  disableImagesLoaded: false,
  reloadOnUpdate: false,
  options: {},
  className: '',
  elementType: 'div',
}

module.exports = FlickityComponent