'use strict';

exports.__esModule = true;
exports.Context = undefined;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _helper = require('./Shared/helper.js');

var _CCarouselItem = require('./CCarouselItem');

var _CCarouselItem2 = _interopRequireDefault(_CCarouselItem);

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

var Context = exports.Context = _react2.default.createContext({});

//component - CoreUI / CCarouselCustom

var CCarouselCustom = function CCarouselCustom(props) {
  var className = props.className,
      cssModule = props.cssModule,
      innerRef = props.innerRef,
      slide = props.slide;

  var _useState = (0, _react.useState)("right"),
      direction = _useState[0],
      setDirection = _useState[1];

  var _useState2 = (0, _react.useState)(false),
      indicatorClicked = _useState2[0],
      setIndicatorClicked = _useState2[1];

  var fields = (0, _react.useRef)({ lastProps: null }).current;

  var setInterval = function setInterval() {
    var properties = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : props;

    clearInterval();
    if (properties.interval) {
      fields.cycleInterval = window.setInterval(function () {
        properties.next();
      }, parseInt(properties.interval, 10));
    }
  };

  var clearInterval = function clearInterval() {
    window.clearInterval(fields.cycleInterval);
  };

  var hoverStart = function hoverStart() {
    if (props.pause === 'hover') {
      clearInterval();
    }
    if (props.mouseEnter) {
      props.mouseEnter.apply(props, arguments);
    }
  };

  var hoverEnd = function hoverEnd() {
    if (props.pause === 'hover') {
      setInterval();
    }
    if (props.mouseLeave) {
      props.mouseLeave.apply(props, arguments);
    }
  };

  var handleKeyPress = function handleKeyPress(e) {
    if (props.keyboard) {
      if (e.keyCode === 37) {
        props.previous();
      } else if (e.keyCode === 39) {
        props.next();
      }
    }
  };

  var renderItems = function renderItems(carouselItems, className) {
    var slide = props.slide;

    return _react2.default.createElement(
      'div',
      { role: 'listbox', className: className },
      carouselItems.map(function (item, index) {
        var isIn = index === props.activeIndex;
        return _react2.default.cloneElement(item, {
          in: isIn,
          slide: slide
        });
      })
    );
  };

  var setState = function setState(oVal, nVal, setF) {
    if (nVal === oVal) return;
    setF(nVal);
  };

  //effect

  (0, _react.useEffect)(function () {
    if (props.ride === 'carousel') {
      setInterval();
    }
    document.addEventListener('keyup', handleKeyPress);
    fields._handleKeyPress = handleKeyPress;
    return function cleanup() {
      clearInterval();
      document.removeEventListener('keyup', fields._handleKeyPress);
    };
  }, []);

  (0, _react.useEffect)(function () {
    if (fields.wrappedOnClickFunc) {
      fields.wrappedOnClickFunc();
      setIndicatorClicked(false);
      fields.wrappedOnClickFunc = null;
    }
  });

  //render

  setInterval(props);
  if (fields.lastProps) {
    if (fields.lastProps.activeIndex + 1 === props.activeIndex) {
      setState(direction, "right", setDirection);
    } else if (fields.lastProps.activeIndex - 1 === props.activeIndex) {
      setState(direction, "left", setDirection);
    } else if (fields.lastProps.activeIndex > props.activeIndex) {
      setState(direction, indicatorClicked ? "left" : "right", setDirection);
    } else if (fields.lastProps.activeIndex !== props.activeIndex) {
      setState(direction, indicatorClicked ? "right" : "left", setDirection);
    }
    setState(indicatorClicked, false, setIndicatorClicked);
  }

  fields.lastProps = props;

  var outerClasses = (0, _helper.mapToCssModules)((0, _classnames2.default)(className, 'carousel', slide && 'slide'), cssModule);
  var innerClasses = (0, _helper.mapToCssModules)((0, _classnames2.default)('carousel-inner'), cssModule);

  var children = props.children.filter(function (child) {
    return child !== null && child !== undefined && typeof child !== 'boolean';
  });

  var slidesOnly = children.every(function (child) {
    return child.type === _CCarouselItem2.default;
  });

  if (slidesOnly) {
    return _react2.default.createElement(
      Context.Provider,
      { value: { direction: direction } },
      _react2.default.createElement(
        'div',
        { className: outerClasses, onMouseEnter: hoverStart, onMouseLeave: hoverEnd, ref: innerRef },
        renderItems(children, innerClasses)
      )
    );
  }

  if (children[0] instanceof Array) {
    var _carouselItems = children[0];
    var _controlLeft = children[1];
    var _controlRight = children[2];

    return _react2.default.createElement(
      Context.Provider,
      { value: { direction: direction } },
      _react2.default.createElement(
        'div',
        { className: outerClasses, onMouseEnter: hoverStart, onMouseLeave: hoverEnd, ref: innerRef },
        renderItems(_carouselItems, innerClasses),
        _controlLeft,
        _controlRight
      )
    );
  }

  var indicators = children[0];
  var wrappedOnClick = function wrappedOnClick(e) {
    if (typeof indicators.props.onClickHandler === 'function') {
      //this.setState({ indicatorClicked: true }, () => indicators.props.onClickHandler(e));
      fields.wrappedOnClickFunc = function () {
        return indicators.props.onClickHandler(e);
      };
      setIndicatorClicked(true);
    }
  };

  var wrappedIndicators = _react2.default.cloneElement(indicators, { onClickHandler: wrappedOnClick });
  var carouselItems = children[1];
  var controlLeft = children[2];
  var controlRight = children[3];

  return _react2.default.createElement(
    Context.Provider,
    { value: { direction: direction } },
    _react2.default.createElement(
      'div',
      { className: outerClasses, onMouseEnter: hoverStart, onMouseLeave: hoverEnd, ref: innerRef },
      wrappedIndicators,
      renderItems(carouselItems, innerClasses),
      controlLeft,
      controlRight
    )
  );
};

CCarouselCustom.propTypes = process.env.NODE_ENV !== "production" ? {
  cssModule: _propTypes2.default.object,
  className: _propTypes2.default.string,
  children: _propTypes2.default.array,
  //
  innerRef: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.func, _propTypes2.default.string]),
  activeIndex: _propTypes2.default.number,
  next: _propTypes2.default.func.isRequired,
  previous: _propTypes2.default.func.isRequired,
  keyboard: _propTypes2.default.bool,
  pause: _propTypes2.default.oneOf(['hover', false]),
  ride: _propTypes2.default.oneOf(['carousel']),
  interval: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string, _propTypes2.default.bool]),
  mouseEnter: _propTypes2.default.func,
  mouseLeave: _propTypes2.default.func,
  slide: _propTypes2.default.bool
} : {};

CCarouselCustom.defaultProps = {
  interval: 5000,
  pause: 'hover',
  keyboard: true,
  slide: true
};

exports.default = CCarouselCustom;