"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends4 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

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

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

var _classnames = _interopRequireDefault(require("classnames"));

var _utils = require("../utils");

var defaultProps = {
  as: 'div',
  classPrefix: 'carousel',
  autoplayInterval: 4000,
  placement: 'bottom',
  shape: 'dot'
};

var Carousel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
  var _sliderStyles, _ref;

  var Component = props.as,
      children = props.children,
      classPrefix = props.classPrefix,
      className = props.className,
      placement = props.placement,
      shape = props.shape,
      autoplay = props.autoplay,
      autoplayInterval = props.autoplayInterval,
      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "children", "classPrefix", "className", "placement", "shape", "autoplay", "autoplayInterval"]);

  var _useCustom = (0, _utils.useCustom)('Carousel'),
      rtl = _useCustom.rtl;

  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
      prefix = _useClassNames.prefix,
      merge = _useClassNames.merge,
      withClassPrefix = _useClassNames.withClassPrefix;

  var count = _utils.ReactChildren.count(children);

  var labels = [];
  var vertical = placement === 'left' || placement === 'right';
  var lengthKey = vertical ? 'height' : 'width';

  var _useState = (0, _react.useState)(0),
      activeIndex = _useState[0],
      setActiveIndex = _useState[1];

  var _useState2 = (0, _react.useState)(0),
      lastIndex = _useState2[0],
      setLastIndex = _useState2[1];

  var handleAutoplay = function handleAutoplay(nextActiveIndex) {
    clear();
    var nextIndex = nextActiveIndex !== null && nextActiveIndex !== void 0 ? nextActiveIndex : activeIndex + 1; // When index is greater than count, start from 1 again.

    setActiveIndex(nextIndex % count);
    setLastIndex(nextActiveIndex == null ? activeIndex : nextIndex % count);
    reset();
  };

  var handleChange = function handleChange(event) {
    var activeIndex = +event.target.value;
    handleAutoplay(activeIndex);
  }; // Set a timer for automatic playback.
  // `autoplay` needs to be cast to boolean type to avoid undefined parameters.


  var _useTimeout = (0, _utils.useTimeout)(handleAutoplay, autoplayInterval, !!autoplay && count > 1),
      clear = _useTimeout.clear,
      reset = _useTimeout.reset;

  var uniqueId = (0, _react.useMemo)(function () {
    return (0, _utils.guid)();
  }, []);

  var items = _react.default.Children.map(children, function (child, index) {
    var _extends2;

    if (!child) {
      return;
    }

    var inputKey = "indicator_" + uniqueId + "_" + index;
    labels.push( /*#__PURE__*/_react.default.createElement("li", {
      key: "label" + index,
      className: prefix('label-wrapper')
    }, /*#__PURE__*/_react.default.createElement("input", {
      name: inputKey,
      id: inputKey,
      type: "radio",
      onChange: handleChange,
      value: index,
      checked: activeIndex === index
    }), /*#__PURE__*/_react.default.createElement("label", {
      htmlFor: inputKey,
      className: prefix('label')
    })));
    return /*#__PURE__*/_react.default.cloneElement(child, {
      key: "slider-item" + index,
      'aria-hidden': activeIndex !== index,
      style: (0, _extends4.default)({}, child.props.style, (_extends2 = {}, _extends2[lengthKey] = 100 / count + "%", _extends2)),
      className: (0, _classnames.default)(prefix('slider-item'), child.props.className)
    });
  });

  var classes = merge(className, withClassPrefix("placement-" + placement, "shape-" + shape));
  var positiveOrder = vertical || !rtl;
  var sign = positiveOrder ? '-' : '';
  var activeRatio = "" + sign + 100 / count * activeIndex + "%";
  var sliderStyles = (_sliderStyles = {}, _sliderStyles[lengthKey] = count * 100 + "%", _sliderStyles.transform = vertical ? "translate3d(0, " + activeRatio + " ,0)" : "translate3d(" + activeRatio + ", 0 ,0)", _sliderStyles);
  var showMask = count > 1 && activeIndex === 0 && activeIndex !== lastIndex;
  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends4.default)({}, rest, {
    ref: ref,
    className: classes
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: prefix('content')
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: prefix('slider'),
    style: sliderStyles
  }, items), showMask && /*#__PURE__*/_react.default.createElement("div", {
    className: prefix('slider-after', {
      'slider-after-vertical': vertical
    }),
    style: (_ref = {}, _ref[lengthKey] = '200%', _ref)
  }, [items[items.length - 1], items[0]].map(function (node) {
    var _extends3;

    return /*#__PURE__*/_react.default.cloneElement(node, {
      key: node.key,
      style: (0, _extends4.default)({}, node.props.style, (_extends3 = {}, _extends3[lengthKey] = '50%', _extends3))
    });
  }))), /*#__PURE__*/_react.default.createElement("div", {
    className: prefix('toolbar')
  }, /*#__PURE__*/_react.default.createElement("ul", null, labels)));
});

Carousel.displayName = 'Carousel';
Carousel.defaultProps = defaultProps;
Carousel.propTypes = {
  as: _propTypes.default.elementType,
  className: _propTypes.default.string,
  classPrefix: _propTypes.default.string,
  autoplay: _propTypes.default.bool,
  autoplayInterval: _propTypes.default.number,
  placement: _propTypes.default.oneOf(['top', 'bottom', 'left', 'right']),
  shape: _propTypes.default.oneOf(['dot', 'bar'])
};
var _default = Carousel;
exports.default = _default;