import React__default from 'react';
import '@emotion/core';
import { a as __assign, b as __makeTemplateObject } from './_tslib-5c49bd3f.js';
import { jsxs, jsx } from '@emotion/react/jsx-runtime';
import '@emotion/styled';
import '@emotion/react';
import { s as styled } from './css-efbd0d2d.js';
import { u as useId } from './auto-id.esm-bfe8e225.js';
import { u as useCustomCss } from './utilities-357c56e6.js';

var getPercentage = function (current, min, max) {
    return ((current - min) * 100) / (max - min);
};
var Slider = function (_a) {
    var userProvidedId = _a.id, label = _a.label, _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, unit = _a.unit, _d = _a.min, min = _d === void 0 ? 0 : _d, _e = _a.max, max = _e === void 0 ? 100 : _e, _f = _a.step, step = _f === void 0 ? 1 : _f, _g = _a.showLimits, showLimits = _g === void 0 ? true : _g, onChange = _a.onChange, className = _a.className, customCss = _a.customCss;
    var resolvedCss = useCustomCss(customCss);
    var id = useId(userProvidedId);
    var labelId = "label-" + id;
    var thumbId = "thumb-" + id;
    var _h = React__default.useState(initialValue ? initialValue : min), value = _h[0], setValue = _h[1];
    var sliderRef = React__default.useRef();
    var currentRef = React__default.useRef();
    var initialPercentage = getPercentage(initialValue, min, max);
    var handleChange = function (e) {
        if (onChange) {
            onChange(parseInt(e.target.value));
        }
        setValue(parseInt(e.target.value));
        var percentage = Math.round(getPercentage(parseInt(e.target.value), min, max));
        if (currentRef.current !== undefined) {
            currentRef.current.style.left = "calc(" + percentage + "% + (" + (8 - percentage * 0.15) + "px - 8px))";
        }
        document.documentElement.style.setProperty('--webkit-slider-gradient-percentage', percentage + "%");
    };
    React__default.useEffect(function () {
        document.documentElement.style.setProperty('--webkit-slider-gradient-percentage', initialPercentage + "%");
    }, [initialPercentage]);
    return (jsxs(SliderContainer, __assign({ className: className, css: resolvedCss }, { children: [jsx(Label, __assign({ htmlFor: thumbId, id: labelId }, { children: label }), void 0),
            jsx(RangeSlider, { type: "range", ref: sliderRef, id: thumbId, min: min, max: max, step: step, value: value, "aria-labelledby": labelId, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, onChange: handleChange, "aria-disabled": disabled, disabled: disabled }, void 0),
            jsxs("div", __assign({ className: "output", ref: currentRef, css: {
                    left: initialPercentage > 0
                        ? "calc(" + initialPercentage + "% + (" + (8 - initialPercentage * 0.15) + "px - 8px))"
                        : '0',
                } }, { children: [value, unit && unit] }), void 0),
            showLimits && (jsxs(Limits, { children: [jsx("span", { children: value > min && "" + min + (unit ? unit : '') }, void 0),
                    jsx("span", { children: value < max && "" + max + (unit ? unit : '') }, void 0)] }, void 0))] }), void 0));
};
var Label = styled('label')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: 1.125em;\n  font-weight: 600;\n  letter-spacing: 0px;\n  color: #282c39;\n  opacity: 1;\n"], ["\n  font-size: 1.125em;\n  font-weight: 600;\n  letter-spacing: 0px;\n  color: #282c39;\n  opacity: 1;\n"])));
var SliderContainer = styled('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  * {\n    box-sizing: content-box;\n  }\n"], ["\n  position: relative;\n  width: 100%;\n  * {\n    box-sizing: content-box;\n  }\n"])));
var TrackStyles = "\n  box-sizing: border-box;\n  width: 100%;\n  height: 4px;\n  background: #e2e2e2;\n  border-radius: 3px;\n";
var ThumbStyles = "\n  -webkit-appearance: none;\n  margin-top: -6px;\n  border: none;\n  box-sizing: border-box;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  z-index: 1;\n";
var RangeSlider = styled('input')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  -webkit-appearance: none;\n  overflow: auto;\n  display: flex;\n  margin: 0;\n  width: 100%;\n  flex: 1;\n  padding: 0;\n  min-height: 1.5em;\n  background: transparent;\n  font: inherit;\n  cursor: grab;\n  \n  &::-webkit-slider-runnable-track {\n    ", "\n    background-image: \n      linear-gradient(to right, \n        ", " 0%, \n        ", " var(--webkit-slider-gradient-percentage),\n        #e2e2e2 var(--webkit-slider-gradient-percentage), \n        #e2e2e2 100%);\n  }\n  &::-moz-range-track {\n    ", "\n  }\n  &::-ms-track{\n    ", "\n  }\n\n  &::-webkit-slider-thumb {\n    ", "\n    background: ", ";\n  }\n  &::-moz-range-thumb{\n    ", "\n    background: ", ";\n  }\n  &::-ms-thumb{\n    ", "\n    background: ", ";\n  }\n\n  &::-moz-range-progress {\n    background: ", ";\n  }\n  &::-ms-fill-lower {\n    background: ", ";\n  }\n  &::-ms-fill-upper {  \n    background-color: #e2e2e2;\n  }\n  &::-ms-tooltip, ~ .output{\n    display: none;\n  }\n  ~ .output{\n    display: block;\n    position: absolute;\n    bottom: 0;\n    padding: 0;\n    width: 14px;\n    text-align: center;\n    font-weight: bold;\n    font-size: .75em;\n  }\n"], ["\n  -webkit-appearance: none;\n  overflow: auto;\n  display: flex;\n  margin: 0;\n  width: 100%;\n  flex: 1;\n  padding: 0;\n  min-height: 1.5em;\n  background: transparent;\n  font: inherit;\n  cursor: grab;\n  \n  &::-webkit-slider-runnable-track {\n    ", "\n    background-image: \n      linear-gradient(to right, \n        ", " 0%, \n        ",
    " var(--webkit-slider-gradient-percentage),\n        #e2e2e2 var(--webkit-slider-gradient-percentage), \n        #e2e2e2 100%);\n  }\n  &::-moz-range-track {\n    ", "\n  }\n  &::-ms-track{\n    ", "\n  }\n\n  &::-webkit-slider-thumb {\n    ", "\n    background: ", ";\n  }\n  &::-moz-range-thumb{\n    ", "\n    background: ", ";\n  }\n  &::-ms-thumb{\n    ", "\n    background: ", ";\n  }\n\n  &::-moz-range-progress {\n    background: ", ";\n  }\n  &::-ms-fill-lower {\n    background: ", ";\n  }\n  &::-ms-fill-upper {  \n    background-color: #e2e2e2;\n  }\n  &::-ms-tooltip, ~ .output{\n    display: none;\n  }\n  ~ .output{\n    display: block;\n    position: absolute;\n    bottom: 0;\n    padding: 0;\n    width: 14px;\n    text-align: center;\n    font-weight: bold;\n    font-size: .75em;\n  }\n"])), TrackStyles, function (_a) {
    var theme = _a.theme;
    return theme.lighten(theme.colors.primary, 30);
}, function (_a) {
    var theme = _a.theme;
    return theme.lighten(theme.colors.primary, 30);
}, TrackStyles, TrackStyles, ThumbStyles, function (_a) {
    var theme = _a.theme;
    return theme.colors.primary;
}, ThumbStyles, function (_a) {
    var theme = _a.theme;
    return theme.colors.primary;
}, ThumbStyles, function (_a) {
    var theme = _a.theme;
    return theme.colors.primary;
}, function (_a) {
    var theme = _a.theme;
    return theme.lighten(theme.colors.primary, 30);
}, function (_a) {
    var theme = _a.theme;
    return theme.lighten(theme.colors.primary, 30);
});
var Limits = styled('div')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  position: relative;\n  top: -6px;\n  span {\n    font-size: 0.6em;\n    color: #7f8188;\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  position: relative;\n  top: -6px;\n  span {\n    font-size: 0.6em;\n    color: #7f8188;\n  }\n"])));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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