"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "SliderBase", {
    enumerable: true,
    get: function() {
        return SliderBase;
    }
});
var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
var _styledcomponents = /*#__PURE__*/ _interop_require_wildcard(require("styled-components"));
var _hooks = require("../../hooks");
function _getRequireWildcardCache(nodeInterop) {
    if (typeof WeakMap !== "function") return null;
    var cacheBabelInterop = new WeakMap();
    var cacheNodeInterop = new WeakMap();
    return (_getRequireWildcardCache = function(nodeInterop) {
        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
    })(nodeInterop);
}
function _interop_require_wildcard(obj, nodeInterop) {
    if (!nodeInterop && obj && obj.__esModule) {
        return obj;
    }
    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
        return {
            default: obj
        };
    }
    var cache = _getRequireWildcardCache(nodeInterop);
    if (cache && cache.has(obj)) {
        return cache.get(obj);
    }
    var newObj = {
        __proto__: null
    };
    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
    for(var key in obj){
        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
            if (desc && (desc.get || desc.set)) {
                Object.defineProperty(newObj, key, desc);
            } else {
                newObj[key] = obj[key];
            }
        }
    }
    newObj.default = obj;
    if (cache) {
        cache.set(obj, newObj);
    }
    return newObj;
}
var Slider = _styledcomponents.default.div.withConfig({
    displayName: "SliderBase__Slider",
    componentId: "sc-1367fcf6-0"
})([
    "position:relative;height:1.625rem;user-select:none;",
    " ",
    ""
], function(param) {
    var _param_$settings = param.$settings, _param_$settings_indent = _param_$settings.indent, indent = _param_$settings_indent === void 0 ? 0.75 : _param_$settings_indent, backgroundColor = _param_$settings.backgroundColor, fillColor = _param_$settings.fillColor;
    return (0, _styledcomponents.css)([
        "--indent:",
        "rem;--background-color:",
        ";--fill-color:",
        ";"
    ], indent, backgroundColor, fillColor);
}, function(param) {
    var disabled = param.disabled;
    return disabled && (0, _styledcomponents.css)([
        "opacity:0.4;"
    ]);
});
var RailWrap = _styledcomponents.default.div.withConfig({
    displayName: "SliderBase__RailWrap",
    componentId: "sc-1367fcf6-1"
})([
    "height:100%;"
]);
var Rail = _styledcomponents.default.div.withConfig({
    displayName: "SliderBase__Rail",
    componentId: "sc-1367fcf6-2"
})([
    "position:relative;top:50%;margin-left:var(--indent);margin-right:var(--indent);height:0.25rem;border-radius:0.125rem;background-color:var(--background-color);overflow:hidden;transform:translateY(-50%);"
]);
var Fill = _styledcomponents.default.div.withConfig({
    displayName: "SliderBase__Fill",
    componentId: "sc-1367fcf6-3"
})([
    "position:absolute;height:100%;top:0;left:0;background-color:var(--fill-color);width:0;"
]);
var SliderBase = function SliderBase(param) {
    var max = param.max, min = param.min, setStepSize = param.setStepSize, railFillWidth = param.railFillWidth, children = param.children, _param_railFillXPosition = param.railFillXPosition, railFillXPosition = _param_railFillXPosition === void 0 ? 0 : _param_railFillXPosition, disabled = param.disabled, onChange = param.onChange, _param_settings = param.settings, settings = _param_settings === void 0 ? {} : _param_settings;
    var _settings_indent = settings.indent, indent = _settings_indent === void 0 ? 0.75 : _settings_indent, _settings_fontSizeMultiplier = settings.fontSizeMultiplier, fontSizeMultiplier = _settings_fontSizeMultiplier === void 0 ? 16 : _settings_fontSizeMultiplier;
    var ref = (0, _react.useRef)(null);
    var gap = indent * fontSizeMultiplier * 2;
    var onHandleChange = (0, _react.useCallback)(function(e) {
        if (!onChange || disabled) {
            return;
        }
        var _e_currentTarget_getBoundingClientRect = e.currentTarget.getBoundingClientRect(), x = _e_currentTarget_getBoundingClientRect.x, width = _e_currentTarget_getBoundingClientRect.width;
        var lastX = e.clientX - x;
        var position = min + lastX / (width - gap) * (max - min);
        var result = Math.max(min, Math.min(max, position));
        onChange(result, {
            lastX: lastX
        });
    }, [
        onChange,
        disabled,
        min,
        gap,
        max
    ]);
    (0, _hooks.useIsomorphicLayoutEffect)(function() {
        var resizeHandler = function resizeHandler() {
            if (ref.current) {
                var railSize = ref.current.offsetWidth - gap;
                var totalSteps = max - min;
                setStepSize(railSize / totalSteps);
            }
        };
        resizeHandler();
        window.addEventListener('resize', resizeHandler);
        return function() {
            return window.removeEventListener('resize', resizeHandler);
        };
    }, [
        min,
        max,
        setStepSize,
        ref.current
    ]);
    var fillStyle = {
        left: "".concat(railFillXPosition, "px"),
        width: "".concat(railFillWidth, "px")
    };
    return /*#__PURE__*/ _react.default.createElement(Slider, {
        disabled: disabled,
        ref: ref,
        $settings: settings
    }, /*#__PURE__*/ _react.default.createElement(RailWrap, {
        "aria-hidden": "true",
        onMouseDown: onHandleChange
    }, /*#__PURE__*/ _react.default.createElement(Rail, null, /*#__PURE__*/ _react.default.createElement(Fill, {
        style: fillStyle
    }))), children);
};
