import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { forwardRef, useMemo, Children, useState, useCallback, useEffect } from 'react';
import { IconDisclosureLeft } from '../../_Icon/Icons/IconDisclosureLeft.js';
import { IconDisclosureRight } from '../../_Icon/Icons/IconDisclosureRight.js';
import { classes } from './Carousel.tokens.js';
import { base as base$2 } from './variations/_size/base.js';
import { base as base$1 } from './variations/_view/base.js';
import { CarouselVirtualItem, ControlsWrapper, IconButton, CarouselWrapper, CarouselTrack, base } from './Carousel.styles.js';
import { useCarousel } from './hooks/useCarousel.js';
import { getNormalizedIndex } from './utils/getNormalizedIndex.js';
import { useDisableScroll } from '../../../hooks/useDisableScroll.js';
import { Dots } from './ui/Dots/Dots.js';

var _IconDisclosureLeft, _IconDisclosureRight;
var _excluded = ["view", "size", "scrollAlign", "children", "controlArrowsDisabled", "paginationOptions", "gap", "className", "style", "defaultIndex", "loop", "autoPlay", "autoPlayInterval", "swipeEnabled", "virtual", "index", "onChangeIndex"];
var VISIBLE_DOTS_DEFAULT = 10;
var DOTS_CENTERED_DEFAULT = false;
var AUTO_PLAY_INTERVAL_DEFAULT = 5000;
var VIRTUAL_OVERSCAN = 3;
var DEFAULT_ESTIMATED_SLIDE_WIDTH = 320;
var ITEM_VIRTUAL_ATTRIBUTE = 'data-carousel-index';

/**
 * Компонент для создания списков с прокруткой.
 */
var carouselNewRoot = function carouselNewRoot(Root) {
  return /*#__PURE__*/forwardRef(function (_ref, ref) {
    var view = _ref.view,
      size = _ref.size,
      _ref$scrollAlign = _ref.scrollAlign,
      scrollAlign = _ref$scrollAlign === void 0 ? 'start' : _ref$scrollAlign,
      children = _ref.children,
      _ref$controlArrowsDis = _ref.controlArrowsDisabled,
      controlArrowsDisabled = _ref$controlArrowsDis === void 0 ? false : _ref$controlArrowsDis,
      paginationOptions = _ref.paginationOptions,
      _ref$gap = _ref.gap,
      gap = _ref$gap === void 0 ? '20px' : _ref$gap,
      className = _ref.className,
      style = _ref.style,
      _ref$defaultIndex = _ref.defaultIndex,
      defaultIndex = _ref$defaultIndex === void 0 ? 0 : _ref$defaultIndex,
      _ref$loop = _ref.loop,
      loop = _ref$loop === void 0 ? false : _ref$loop,
      _ref$autoPlay = _ref.autoPlay,
      autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
      _ref$autoPlayInterval = _ref.autoPlayInterval,
      autoPlayInterval = _ref$autoPlayInterval === void 0 ? AUTO_PLAY_INTERVAL_DEFAULT : _ref$autoPlayInterval,
      _ref$swipeEnabled = _ref.swipeEnabled,
      swipeEnabled = _ref$swipeEnabled === void 0 ? false : _ref$swipeEnabled,
      _ref$virtual = _ref.virtual,
      virtual = _ref$virtual === void 0 ? false : _ref$virtual,
      outerIndex = _ref.index,
      outerOnChangeIndex = _ref.onChangeIndex,
      rest = _objectWithoutProperties(_ref, _excluded);
    var childrenArray = useMemo(function () {
      return Children.toArray(children);
    }, [children]);
    var slidesAmount = childrenArray.length;
    var _useState = useState(function () {
        return getNormalizedIndex(defaultIndex, slidesAmount, loop);
      }),
      _useState2 = _slicedToArray(_useState, 2),
      innerIndex = _useState2[0],
      setInnerIndex = _useState2[1];
    var index = outerIndex !== null && outerIndex !== void 0 ? outerIndex : innerIndex;
    var onChangeIndex = useCallback(function (newIndex) {
      var normalizedIndex = getNormalizedIndex(newIndex, slidesAmount, loop);
      if (outerOnChangeIndex) {
        outerOnChangeIndex(normalizedIndex);
      }
      setInnerIndex(normalizedIndex);
    }, [slidesAmount, loop, outerOnChangeIndex]);
    var handleClickLeft = function handleClickLeft() {
      onChangeIndex(index - 1);
    };
    var handleClickRight = function handleClickRight() {
      onChangeIndex(index + 1);
    };
    useEffect(function () {
      if (!autoPlay || slidesAmount <= 1 || autoPlayInterval <= 0 || !loop && index >= slidesAmount - 1) {
        return;
      }
      var interval = window.setInterval(function () {
        onChangeIndex(index + 1);
      }, autoPlayInterval);
      return function () {
        return window.clearInterval(interval);
      };
    }, [autoPlay, autoPlayInterval, index, loop, slidesAmount]);
    var _useCarousel = useCarousel({
        index: index,
        scrollAlign: scrollAlign,
        onChangeIndex: onChangeIndex,
        swipeEnabled: swipeEnabled,
        slidesAmount: slidesAmount,
        gap: gap,
        virtual: virtual
      }),
      scrollRef = _useCarousel.scrollRef,
      trackRef = _useCarousel.trackRef,
      virtualItems = _useCarousel.virtualItems,
      beforeSpacerWidth = _useCarousel.beforeSpacerWidth,
      afterSpacerWidth = _useCarousel.afterSpacerWidth,
      measureVirtualItem = _useCarousel.measureVirtualItem;
    var slides = useMemo(function () {
      if (!virtual) {
        return children;
      }
      return virtualItems.map(function (virtualItem) {
        var child = childrenArray[virtualItem.index];
        return /*#__PURE__*/React__default.createElement(CarouselVirtualItem, _extends({
          key: virtualItem.key,
          ref: measureVirtualItem(virtualItem.index)
        }, _defineProperty({}, ITEM_VIRTUAL_ATTRIBUTE, virtualItem.index)), child);
      });
    }, [children, childrenArray, measureVirtualItem, virtual, virtualItems]);
    useDisableScroll(scrollRef);
    return /*#__PURE__*/React__default.createElement(Root, _extends({
      className: className,
      style: style,
      size: size,
      view: view,
      ref: ref
    }, rest), /*#__PURE__*/React__default.createElement(ControlsWrapper, null, (loop || index !== 0) && !controlArrowsDisabled && /*#__PURE__*/React__default.createElement(IconButton, {
      className: classes.leftControlButton,
      onClick: handleClickLeft
    }, _IconDisclosureLeft || (_IconDisclosureLeft = /*#__PURE__*/React__default.createElement(IconDisclosureLeft, {
      size: "m",
      color: "inherit"
    }))), /*#__PURE__*/React__default.createElement(CarouselWrapper, {
      ref: scrollRef,
      isSwipeEnabled: swipeEnabled
    }, /*#__PURE__*/React__default.createElement(CarouselTrack, {
      ref: trackRef,
      gap: gap
    }, virtual && beforeSpacerWidth > 0 && /*#__PURE__*/React__default.createElement("div", {
      style: {
        width: beforeSpacerWidth,
        flex: '0 0 auto'
      },
      "aria-hidden": true
    }), slides, virtual && afterSpacerWidth > 0 && /*#__PURE__*/React__default.createElement("div", {
      style: {
        width: afterSpacerWidth,
        flex: '0 0 auto'
      },
      "aria-hidden": true
    }))), (loop || index !== slidesAmount - 1) && !controlArrowsDisabled && /*#__PURE__*/React__default.createElement(IconButton, {
      className: classes.rightControlButton,
      onClick: handleClickRight
    }, _IconDisclosureRight || (_IconDisclosureRight = /*#__PURE__*/React__default.createElement(IconDisclosureRight, {
      size: "m",
      color: "inherit"
    })))), !(paginationOptions !== null && paginationOptions !== void 0 && paginationOptions.disabled) && /*#__PURE__*/React__default.createElement(Dots, {
      index: index,
      onChange: onChangeIndex,
      visibleCount: (paginationOptions === null || paginationOptions === void 0 ? void 0 : paginationOptions.visibleDots) || VISIBLE_DOTS_DEFAULT,
      count: slidesAmount,
      centered: (paginationOptions === null || paginationOptions === void 0 ? void 0 : paginationOptions.centered) || DOTS_CENTERED_DEFAULT
    }));
  });
};
var carouselNewConfig = {
  name: 'Carousel',
  tag: 'div',
  layout: carouselNewRoot,
  base: base,
  variations: {
    view: {
      css: base$1
    },
    size: {
      css: base$2
    }
  },
  defaults: {
    view: 'default',
    size: 's'
  }
};

export { DEFAULT_ESTIMATED_SLIDE_WIDTH, ITEM_VIRTUAL_ATTRIBUTE, VIRTUAL_OVERSCAN, carouselNewConfig, carouselNewRoot };
