"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _utils = require("../../utils");
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _reactMeasure = _interopRequireDefault(require("react-measure"));
var _constants = require("../../constants");
var _Icon = _interopRequireDefault(require("../Icon"));
var _jsxRuntime = require("react/jsx-runtime");
// Copyright 1999-2023. Plesk International GmbH. All rights reserved.

const calcWidths = node => {
  const slideWidths = [].map.call(node.childNodes, el => el.clientWidth);
  const totalWidth = slideWidths.reduce((prev, curr) => prev + curr, 0);
  return {
    slideWidths,
    totalWidth
  };
};
/**
 * Carousel component is used for optimizing page space by displaying only some parts
 * of entire content in a cyclic view.
 * @since 0.0.42
 */
class Carousel extends _react.Component {
  constructor(props) {
    super(props);
    (0, _defineProperty2.default)(this, "state", {
      showControls: false,
      current: 0,
      next: 0,
      moving: false,
      slideWidths: [],
      totalWidth: 0
    });
    (0, _defineProperty2.default)(this, "speed", 500);
    (0, _defineProperty2.default)(this, "playSpeed", 5000);
    (0, _defineProperty2.default)(this, "isRtl", void 0);
    (0, _defineProperty2.default)(this, "playTimer", null);
    (0, _defineProperty2.default)(this, "movingCallback", null);
    (0, _defineProperty2.default)(this, "rootRef", /*#__PURE__*/(0, _react.createRef)());
    (0, _defineProperty2.default)(this, "genuineRef", /*#__PURE__*/(0, _react.createRef)());
    this.handlePrevClick = this.handlePrevClick.bind(this);
    this.handleNextClick = this.handleNextClick.bind(this);
    this.stop = this.stop.bind(this);
    this.play = this.play.bind(this);
    this.handleResize = this.handleResize.bind(this);
  }
  componentDidMount() {
    this.isRtl = (0, _utils.isRtl)();
    this.play();
  }
  componentDidUpdate() {
    if (!this.rootRef.current || !this.genuineRef.current) {
      return;
    }
    const {
      width
    } = this.rootRef.current.getBoundingClientRect();
    const {
      slideWidths,
      totalWidth
    } = calcWidths(this.genuineRef.current);
    if (this.state.totalWidth !== totalWidth) {
      this.setState({
        slideWidths,
        totalWidth,
        showControls: width < totalWidth
      });
    }
  }
  componentWillUnmount() {
    this.stop();
    if (this.movingCallback) {
      clearTimeout(this.movingCallback);
    }
  }
  handlePrevClick() {
    this.stop();
    this.setCurrentSlide(this.state.current - 1);
  }
  handleNextClick() {
    this.stop();
    this.setCurrentSlide(this.state.current + 1);
  }
  play() {
    this.playTimer = setTimeout(() => {
      this.setCurrentSlide(this.state.current + 1);
      this.play();
    }, this.playSpeed);
  }
  stop() {
    if (this.playTimer) {
      clearTimeout(this.playTimer);
      this.playTimer = null;
    }
  }
  setCurrentSlide(next) {
    const {
      slideWidths,
      moving
    } = this.state;
    if (moving) {
      return;
    }
    let current = next;
    if (current < 0) {
      current = slideWidths.length - 1;
    }
    if (current >= slideWidths.length) {
      current = 0;
    }
    this.setState({
      current,
      next,
      moving: true
    });
    this.movingCallback = setTimeout(() => {
      this.movingCallback = null;
      this.setState({
        moving: false
      });
    }, this.speed);
  }
  handleResize(_ref) {
    let {
      bounds
    } = _ref;
    const node = this.genuineRef.current;
    if (!node) {
      return;
    }
    const {
      slideWidths,
      totalWidth
    } = calcWidths(node);
    this.setState({
      slideWidths,
      totalWidth,
      showControls: (bounds?.width || 0) < totalWidth
    });
  }
  listStyle() {
    const {
      current,
      next,
      moving,
      slideWidths,
      totalWidth
    } = this.state;
    const moveTo = moving ? next : current;
    let x = -totalWidth + 26;
    if (moveTo < 0) {
      for (let i = moveTo; i < 0; i++) {
        x += slideWidths[i + slideWidths.length];
      }
    } else {
      for (let i = 0; i < moveTo; i++) {
        x -= slideWidths[i % slideWidths.length];
      }
    }
    if (this.isRtl) {
      x = -x;
    }
    return {
      WebkitTransform: `translateX(${x ? `${x}px` : 0})`,
      transform: `translateX(${x ? `${x}px` : 0})`,
      WebkitTransition: moving ? `-webkit-transform ${this.speed}ms ease` : undefined,
      transition: moving ? `transform ${this.speed}ms ease` : undefined
    };
  }
  render() {
    const {
      showControls
    } = this.state;
    const {
      baseClassName,
      className,
      children,
      ...props
    } = this.props;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMeasure.default, {
      onResize: this.handleResize,
      bounds: true,
      innerRef: this.rootRef,
      children: _ref2 => {
        let {
          measureRef
        } = _ref2;
        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
          ref: measureRef,
          className: (0, _classnames.default)(baseClassName, className),
          ...props,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
            className: `${baseClassName}__slides`,
            style: showControls ? this.listStyle() : undefined,
            children: [showControls && children, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
              className: `${baseClassName}__genuine-slides`,
              ref: this.genuineRef,
              children: children
            }), showControls && children]
          }), showControls && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
            className: `${baseClassName}__controls`,
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
              type: "button",
              className: (0, _classnames.default)(`${baseClassName}__control`, `${baseClassName}__control--previous`),
              onClick: this.handlePrevClick,
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
                name: "chevron-left",
                flipHorizontal: this.isRtl,
                className: `${baseClassName}__control-icon`
              })
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
              type: "button",
              className: (0, _classnames.default)(`${baseClassName}__control`, `${baseClassName}__control--next`),
              onClick: this.handleNextClick,
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
                name: "chevron-right",
                flipHorizontal: this.isRtl,
                className: `${baseClassName}__control-icon`
              })
            })]
          })]
        });
      }
    });
  }
}
(0, _defineProperty2.default)(Carousel, "defaultProps", {
  children: null,
  className: null,
  baseClassName: `${_constants.CLS_PREFIX}carousel`
});
var _default = exports.default = Carousel;