import React from 'react'
import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment'
import { bool, object, string, func, array } from 'prop-types'

const IS_BROWSER = typeof window === 'object'
const IS_DOM_ABLE = canUseDOM || IS_BROWSER

// well that was some big ole unknown breakage
export default class FlickityComponent extends React.Component {
  static displayName = 'FlickidyDooFork'
  static propTypes = {
    disableImagesLoaded: bool,
    reloadOnUpdate: bool,
    options: object,
    className: string,
    elementType: string,
    children: array,
    onSwipe: func,
  }
  static defaultProps = {
    disableImagesLoaded: false,
    reloadOnUpdate: false,
    options: {},
    className: '',
    elementType: 'div',
  }
  state = {
    selectedIndex: 0,
  }
  // dom ref
  carousel = null
  // Flickidy
  flkty = null

  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()
    }
  }

  updateSelected = () => {
    const index = this.flkty.selectedIndex
    this.setState({
      selectedIndex: index,
    })
    if (this.props.onSwipe) {
      this.props.onSwipe(index)
    }
  }

  render() {
    if (IS_BROWSER) {
      window.meh = this
    }

    const props = {
      className: this.props.className,
      ref: node => {
        this.carousel = node
      },
    }

    return React.createElement(this.props.elementType, props, this.props.children)
  }
}

// doesn't look like we use this plus is built into flickidy
// imagesLoaded() {
//   if (!this.props.disableImagesLoaded && canUseDOM) {
//     const imagesloaded = require('imagesloaded')
//     imagesloaded(
//       this.carousel,
//       function(instance) {
//         this.flkty.reloadCells()
//       }.bind(this)
//     )
//   }
// }