import React__default, { useRef, useEffect } from 'react';
import { classes } from '../../Slider.tokens.js';
import { cx } from '../../../../utils/index.js';
import { Slider, RailWrap, Rail, Fill } from './SliderBase.styles.js';
import { useIsomorphicLayoutEffect } from '../../../../hooks/useIsomorphicLayoutEffect.js';

var SliderBase = function SliderBase(_ref) {
  var max = _ref.max,
    min = _ref.min,
    setStepSize = _ref.setStepSize,
    railFillWidth = _ref.railFillWidth,
    children = _ref.children,
    _ref$railFillXPositio = _ref.railFillXPosition,
    railFillXPosition = _ref$railFillXPositio === void 0 ? 0 : _ref$railFillXPositio,
    disabled = _ref.disabled,
    labelPlacement = _ref.labelPlacement,
    rangeValuesPlacement = _ref.rangeValuesPlacement,
    onChange = _ref.onChange,
    orientation = _ref.orientation,
    reversed = _ref.reversed,
    size = _ref.size,
    sliderAlign = _ref.sliderAlign;
  var ref = useRef(null);
  var isVertical = orientation === 'vertical';
  useEffect(function () {
    var resizeHandler = function resizeHandler() {
      if (ref.current) {
        var railSize = isVertical ? ref.current.offsetHeight : ref.current.offsetWidth;
        var totalSteps = max - min;
        setStepSize(railSize / totalSteps);
      }
    };
    resizeHandler();
  }, [labelPlacement, rangeValuesPlacement, isVertical,
  // для перерасчета размеров
  size, sliderAlign]);
  var onHandleChange = function onHandleChange(e) {
    if (!onChange || disabled) {
      return;
    }
    var _e$currentTarget$getB = e.currentTarget.getBoundingClientRect(),
      x = _e$currentTarget$getB.x,
      width = _e$currentTarget$getB.width,
      y = _e$currentTarget$getB.y,
      height = _e$currentTarget$getB.height;
    var lastPos = isVertical ? e.clientY - y : e.clientX - x;
    var sliderWidth = isVertical ? height : width;
    var position = min + lastPos / sliderWidth * (max - min);
    var result = Math.max(min, Math.min(max, position));
    var data = isVertical ? {
      lastY: lastPos
    } : {
      lastX: lastPos
    };
    onChange(result, data);
  };
  useIsomorphicLayoutEffect(function () {
    var resizeHandler = function resizeHandler() {
      if (ref.current) {
        var railSize = isVertical ? ref.current.offsetHeight : ref.current.offsetWidth;
        var totalSteps = max - min;
        setStepSize(railSize / totalSteps);
      }
    };
    resizeHandler();
    window.addEventListener('resize', resizeHandler);
    return function () {
      return window.removeEventListener('resize', resizeHandler);
    };
  }, [min, max, setStepSize, labelPlacement, rangeValuesPlacement, isVertical]);
  var fillStyle = function () {
    if (isVertical && reversed) {
      return {
        bottom: 0,
        height: "calc(100% - ".concat(railFillWidth, "px)"),
        top: 'auto',
        width: '100%'
      };
    }
    if (isVertical) {
      return {
        bottom: "".concat(railFillXPosition, "px"),
        height: "".concat(railFillWidth, "px"),
        width: '100%'
      };
    }
    return {
      left: "".concat(railFillXPosition, "px"),
      width: "".concat(railFillWidth, "px")
    };
  }();
  return /*#__PURE__*/React__default.createElement(Slider, {
    ref: ref,
    className: cx(orientation === 'vertical' && classes.verticalOrientation)
  }, /*#__PURE__*/React__default.createElement(RailWrap, {
    "aria-hidden": "true",
    onMouseDown: onHandleChange
  }, /*#__PURE__*/React__default.createElement(Rail, null, /*#__PURE__*/React__default.createElement(Fill, {
    style: fillStyle
  }))), children);
};

export { SliderBase };
//# sourceMappingURL=SliderBase.js.map
