"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _ExecutionEnvironment = require("fbjs/lib/ExecutionEnvironment");

var _propTypes = require("prop-types");

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : {
    default: obj
  };
}

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.default.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      selectedIndex: 0 // @todo createRef?
      // dom ref

    };
    this.carousel = null;
    this.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.bind(this)); // this.imagesLoaded()
    }
  }

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

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

  updateSelected() {
    if (this.flkty) {
      const index = this.flkty.selectedIndex;
      this.setState({
        selectedIndex: index
      });

      if (this.props.onSwipe) {
        this.props.onSwipe(index);
      }
    }
  }

  render() {
    const props = {
      className: this.props.className,
      ref: node => {
        this.carousel = node;
      }
    };
    return _react.default.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)
//     )
//   }
// }


exports.default = FlickityComponent;
FlickityComponent.displayName = 'FlickidyDooFork';
FlickityComponent.propTypes = {
  disableImagesLoaded: _propTypes.bool,
  reloadOnUpdate: _propTypes.bool,
  options: _propTypes.object,
  className: _propTypes.string,
  elementType: _propTypes.string,
  children: _propTypes.array,
  onSwipe: _propTypes.func
};
FlickityComponent.defaultProps = {
  disableImagesLoaded: false,
  reloadOnUpdate: false,
  options: {},
  className: '',
  elementType: 'div'
};