import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/esm/extends";
import React, { Fragment, forwardRef } from 'react';
import PropTypes from 'prop-types';
import invariant from 'invariant';
import { Slider as CompoundSlider, Handles, Rail, Tracks } from 'react-compound-slider';
import { isNotNil } from 'ramda-extension';
import Box from '../Box';

const Handle = ({
  domain: [min, max],
  handle: {
    id,
    value,
    percent
  },
  variant,
  getHandleProps
}) => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Box, _extends({
  sx: {
    variant: `${variant}.handleTouch`,
    left: `${percent}%`,
    position: 'absolute',
    transform: 'translate(-50%, -50%)'
  }
}, getHandleProps(id))), /*#__PURE__*/React.createElement(Box, {
  role: "slider",
  "aria-valuemin": min,
  "aria-valuemax": max,
  "aria-valuenow": value,
  sx: {
    variant: `${variant}.handle`,
    left: `${percent}%`,
    position: 'absolute',
    transform: 'translate(-50%, -50%)',
    zIndex: 2
  }
}));

process.env.NODE_ENV !== "production" ? Handle.propTypes = {
  domain: PropTypes.arrayOf(PropTypes.number).isRequired,
  getHandleProps: PropTypes.func.isRequired,
  handle: PropTypes.shape({
    id: PropTypes.any,
    value: PropTypes.any,
    percent: PropTypes.number
  }).isRequired,
  variant: PropTypes.oneOf(['forms.slider', 'forms.slider.danger', 'forms.slider.disabled'])
} : void 0;

const Track = ({
  source,
  target,
  getTrackProps,
  variant
}) => /*#__PURE__*/React.createElement(Box, _extends({
  sx: {
    variant: `${variant}.track`,
    position: 'absolute',
    transform: 'translate(0%, -50%)',
    left: `${source.percent}%`,
    width: `${target.percent - source.percent}%`,
    zIndex: 1
  }
}, getTrackProps()));

process.env.NODE_ENV !== "production" ? Track.propTypes = {
  getTrackProps: PropTypes.func.isRequired,
  source: PropTypes.shape({
    percent: PropTypes.number.isRequired
  }),
  target: PropTypes.shape({
    percent: PropTypes.number.isRequired
  }),
  variant: PropTypes.oneOf(['forms.slider', 'forms.slider.danger', 'forms.slider.disabled'])
} : void 0;

const SliderRail = ({
  getRailProps,
  variant
}) => /*#__PURE__*/React.createElement(Box, _extends({
  sx: {
    variant: `${variant}.rail`,
    position: 'absolute',
    width: '100%',
    transform: 'translate(0%, -50%)'
  }
}, getRailProps()));

process.env.NODE_ENV !== "production" ? SliderRail.propTypes = {
  getRailProps: PropTypes.func.isRequired,
  variant: PropTypes.oneOf(['forms.slider', 'forms.slider.danger', 'forms.slider.disabled'])
} : void 0;
const Slider = /*#__PURE__*/forwardRef((_ref, ref) => {
  let {
    disabled,
    step = 1,
    min,
    variant: variantProp,
    max,
    onChange,
    onUpdate,
    value
  } = _ref,
      rest = _objectWithoutProperties(_ref, ["disabled", "step", "min", "variant", "max", "onChange", "onUpdate", "value"]);

  invariant(isNotNil(min), '`min` is required for Slider component');
  invariant(isNotNil(max), '`max` is required for Slider component');
  const variant = !variantProp ? 'forms.slider' : `forms.slider.${variantProp}`;
  const domain = [min, max];
  return /*#__PURE__*/React.createElement(CompoundSlider, _extends({
    mode: 1,
    step: step,
    domain: domain,
    rootStyle: {
      position: 'relative',
      width: '100%',
      touchAction: 'none'
    },
    onUpdate: onUpdate,
    onChange: onChange,
    values: value,
    disabled: disabled,
    ref: ref
  }, rest), /*#__PURE__*/React.createElement(Rail, null, ({
    getRailProps
  }) => /*#__PURE__*/React.createElement(SliderRail, {
    variant: variant,
    getRailProps: getRailProps
  })), /*#__PURE__*/React.createElement(Handles, null, ({
    handles,
    getHandleProps
  }) => /*#__PURE__*/React.createElement(Fragment, null, handles.map(handle => /*#__PURE__*/React.createElement(Handle, {
    variant: variant,
    key: handle.id,
    handle: handle,
    domain: domain,
    disabled: disabled,
    getHandleProps: getHandleProps
  })))), /*#__PURE__*/React.createElement(Tracks, {
    right: false,
    left: false
  }, ({
    tracks,
    getTrackProps
  }) => /*#__PURE__*/React.createElement(Fragment, null, tracks.map(({
    id,
    source,
    target
  }) => /*#__PURE__*/React.createElement(Track, {
    variant: variant,
    key: id,
    source: source,
    target: target,
    getTrackProps: getTrackProps
  })))));
});
Slider.displayName = 'Slider';
process.env.NODE_ENV !== "production" ? Slider.propTypes = {
  disabled: PropTypes.bool,
  max: PropTypes.number.isRequired,
  min: PropTypes.number.isRequired,
  onChange: PropTypes.func,
  onUpdate: PropTypes.func,
  step: PropTypes.any,
  value: PropTypes.any,
  variant: PropTypes.oneOf(['danger', 'disabled'])
} : void 0;
export default Slider;