import React from 'react';
import 'react-dom';
import { c as _slicedToArray } from '../_rollupPluginBabelHelpers-539c1155.js';
import PropTypes from 'prop-types';
import 'styled-components';
import '../index-930c2100.js';
import '../hooks/useActivify.js';
import '../overlays/tooltip.js';
import '../key_codes-a5a2b85e.js';
import '../index-6b96e57a.js';
import '@styled-system/space';
import '@styled-system/color';
import '@styled-system/border';
import '@styled-system/variant';
import '@styled-system/typography';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import Icon from './icon.js';
import '../info-fc9c81b4.js';
import '../close-cd95ea58.js';
import '../close-v2-118f2b87.js';
import '../file_placeholder-51e080e8.js';
import '../arrow-e522a0cc.js';
import '../tick-ee41abaf.js';
import { A as AngleDownIcon } from '../angle-down-4038e060.js';
import '../checkmark-b6f07b8e.js';
import '../search-da5a95f5.js';
import '../overlays/withTooltip.js';

var css = ".Slider_componentSliderWrapper__2ze27 {\n  position: relative;\n  display: flex;\n  align-items: center; }\n\n.Slider_componentSlider__3NTDg {\n  flex: 1;\n  width: 100%;\n  transition: transform 0.5s cubic-bezier(0.175, 0.5, 0.12, 1);\n  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 5%, black 15%, black 80%, rgba(0, 0, 0, 0) 98%); }\n  .Slider_componentSlider__3NTDg.Slider_disabled__lL6M1 {\n    -webkit-mask-image: linear-gradient(to right, black 0%, black 85%, rgba(0, 0, 0, 0) 98%); }\n\n.Slider_componentSliderTrack__1nwTv {\n  display: inline-flex;\n  flex-wrap: nowrap;\n  transition: transform 0.5s cubic-bezier(0.175, 0.5, 0.12, 1);\n  min-width: 300px; }\n\n.Slider_componentSliderArrow__y_cw0 {\n  position: absolute;\n  z-index: 2;\n  left: 0px;\n  top: 50%;\n  transform: translateY(-50%);\n  min-width: 40px;\n  height: 40px;\n  border-radius: 100px;\n  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);\n  background-color: #fff;\n  border: 1px solid #eee;\n  cursor: pointer;\n  transition: 0.2s ease-out;\n  display: flex;\n  align-items: center;\n  justify-content: center; }\n  .Slider_componentSliderArrow__y_cw0:hover {\n    background-color: #fff; }\n  .Slider_componentSliderArrow__y_cw0:active {\n    background-color: #fff; }\n  .Slider_componentSliderArrow__y_cw0.Slider_disabled__lL6M1 {\n    opacity: 0;\n    pointer-events: none;\n    transform: translateY(-40%); }\n  .Slider_componentSliderArrow__y_cw0.Slider_right__1ultP {\n    left: auto;\n    right: 0px;\n    transform: translateY(-50%) rotate(180deg);\n    box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.1); }\n\n.Slider_angleDownIcon__2BIDe {\n  transform: rotate(90deg); }\n\n.Slider_card__3V2b- {\n  width: 200px;\n  height: 200px;\n  margin-right: 8px;\n  background-color: #eee;\n  transform-origin: 0 50%;\n  transition: 0.2s ease-out; }\n  .Slider_card__3V2b-.Slider_active__geD5u {\n    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05); }\n";
var styles = {"componentSliderWrapper":"Slider_componentSliderWrapper__2ze27","componentSlider":"Slider_componentSlider__3NTDg","disabled":"Slider_disabled__lL6M1","componentSliderTrack":"Slider_componentSliderTrack__1nwTv","componentSliderArrow":"Slider_componentSliderArrow__y_cw0","right":"Slider_right__1ultP","angleDownIcon":"Slider_angleDownIcon__2BIDe","card":"Slider_card__3V2b-","active":"Slider_active__geD5u"};
styleInject(css);

var getNumChildren = function getNumChildren(children) {
  var count = 0;
  React.Children.forEach(children, function (child) {
    if (child) count += 1;
  });
  return count;
};

function useSlider(children, _ref) {
  var onChange = _ref.onChange,
      centerMode = _ref.centerMode,
      initialSlide = _ref.initialSlide;

  var _React$useState = React.useState(0),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      left = _React$useState2[0],
      setLeft = _React$useState2[1];

  var _React$useState3 = React.useState(0),
      _React$useState4 = _slicedToArray(_React$useState3, 2),
      offset = _React$useState4[0],
      setOffset = _React$useState4[1];

  var _React$useState5 = React.useState(initialSlide),
      _React$useState6 = _slicedToArray(_React$useState5, 2),
      slide = _React$useState6[0],
      setSlide = _React$useState6[1];

  var sliderWrapperRef = React.useRef();
  var numberOfElements = getNumChildren(children);
  var sliderElementRefs = new Array(numberOfElements).fill(0).map(function () {
    return React.createRef();
  });
  var slideTo = React.useCallback(function (index) {
    return function () {
      var slideToIndex = index;

      if (slideToIndex > numberOfElements - 1) {
        slideToIndex = numberOfElements - 1;
      } else if (slideToIndex < 0) {
        slideToIndex = 0;
      }

      var left = sliderElementRefs.reduce(function (leftTotal, elementRef, i) {
        if (i < index) leftTotal += elementRef.current.getBoundingClientRect().width;
        return leftTotal;
      }, 0);

      if (centerMode) {
        left += sliderElementRefs[index].current.getBoundingClientRect().width / 2;
      } else if (slideToIndex !== 0) {
        left += -60;
      }

      setLeft(left);
      setSlide(slideToIndex);
      onChange && onChange(slideToIndex);
    };
  });
  React.useEffect(function () {
    if (centerMode) {
      var _offset = sliderWrapperRef.current.getBoundingClientRect().width / 2;

      setOffset(_offset);
    }

    slideTo(initialSlide || 0);
  }, [sliderWrapperRef.current]);
  React.useEffect(function () {
    setSlide(initialSlide);
  }, [initialSlide]);
  return {
    left: left,
    offset: offset,
    slide: slide,
    sliderWrapperRef: sliderWrapperRef,
    sliderElementRefs: sliderElementRefs,
    slideTo: slideTo,
    numElements: numberOfElements
  };
}

var renderArrow = function renderArrow(className, onClick) {
  return React.createElement("div", {
    onClick: onClick,
    className: "".concat(styles.componentSliderArrow, " ").concat(className)
  }, React.createElement(Icon, {
    className: styles.angleDownIcon,
    src: AngleDownIcon
  }));
};

var Slider = function Slider(_ref) {
  var className = _ref.className,
      centerMode = _ref.centerMode,
      children = _ref.children,
      onChange = _ref.onChange,
      initialSlide = _ref.initialSlide,
      prefixClassName = _ref.prefixClassName;

  var _useSlider = useSlider(children, {
    onChange: onChange,
    centerMode: centerMode,
    initialSlide: initialSlide
  }),
      left = _useSlider.left,
      offset = _useSlider.offset,
      slide = _useSlider.slide,
      sliderWrapperRef = _useSlider.sliderWrapperRef,
      sliderElementRefs = _useSlider.sliderElementRefs,
      slideTo = _useSlider.slideTo,
      numElements = _useSlider.numElements;

  var leftArrowDisabledClass = slide === 0 ? styles.disabled : "";
  var rightArrowDisabledClass = slide === numElements - 1 || numElements < 2 ? styles.disabled : "";
  var transformStyle = {
    transform: "translate3d(".concat(-1 * (left - offset), "px, 0, 0)")
  };
  return React.createElement("div", {
    "data-testid": "slider",
    ref: sliderWrapperRef,
    className: "".concat(styles.componentSliderWrapper, " ").concat(className, " ").concat(prefixClassName)
  }, renderArrow("".concat(styles.left, " ").concat(prefixClassName, "-arrow  ").concat(prefixClassName, "-arrow-left ").concat(leftArrowDisabledClass), slideTo(slide - 1)), React.createElement("div", {
    className: "".concat(styles.componentSlider, " ").concat(leftArrowDisabledClass)
  }, React.createElement("div", {
    "data-testid": "slider-track",
    style: transformStyle,
    className: "".concat(styles.componentSliderTrack, " ").concat(prefixClassName, "-items")
  }, React.Children.map(children, function (child, index) {
    if (!child) return null;
    var activeClassName = index === slide ? "".concat(prefixClassName, "-item-active") : "";
    return React.createElement("div", {
      ref: sliderElementRefs[index],
      className: "".concat(styles.componentSliderItem, " ").concat(prefixClassName, "-item ").concat(activeClassName)
    }, React.cloneElement(child, {
      active: index === slide
    }));
  }))), renderArrow("".concat(styles.right, " ").concat(prefixClassName, "-arrow  ").concat(prefixClassName, "-arrow-right ").concat(rightArrowDisabledClass), slideTo(slide + 1)));
};

Slider.propTypes = {
  children: PropTypes.node,
  centerMode: PropTypes.bool,
  className: PropTypes.string,
  prefixClassName: PropTypes.string,
  onChange: PropTypes.func,
  initialSlide: PropTypes.number
};
Slider.defaultProps = {
  children: null,
  centerMode: false,
  className: "",
  prefixClassName: "",
  onChange: function onChange() {},
  initialSlide: 0
};
Slider.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Slider",
  "props": {
    "children": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "node"
      },
      "required": false,
      "description": ""
    },
    "centerMode": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "onChange": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "initialSlide": {
      "defaultValue": {
        "value": "0",
        "computed": false
      },
      "type": {
        "name": "number"
      },
      "required": false,
      "description": ""
    }
  }
};

export default Slider;
