import React, { useCallback, useRef } from 'react';
import styled, { css } from 'styled-components';
import { useIsomorphicLayoutEffect } from '../../hooks';
var Slider = styled.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 css([
        "--indent:",
        "rem;--background-color:",
        ";--fill-color:",
        ";"
    ], indent, backgroundColor, fillColor);
}, function(param) {
    var disabled = param.disabled;
    return disabled && css([
        "opacity:0.4;"
    ]);
});
var RailWrap = styled.div.withConfig({
    displayName: "SliderBase__RailWrap",
    componentId: "sc-1367fcf6-1"
})([
    "height:100%;"
]);
var Rail = styled.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 = styled.div.withConfig({
    displayName: "SliderBase__Fill",
    componentId: "sc-1367fcf6-3"
})([
    "position:absolute;height:100%;top:0;left:0;background-color:var(--fill-color);width:0;"
]);
export 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 = useRef(null);
    var gap = indent * fontSizeMultiplier * 2;
    var onHandleChange = 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
    ]);
    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.createElement(Slider, {
        disabled: disabled,
        ref: ref,
        $settings: settings
    }, /*#__PURE__*/ React.createElement(RailWrap, {
        "aria-hidden": "true",
        onMouseDown: onHandleChange
    }, /*#__PURE__*/ React.createElement(Rail, null, /*#__PURE__*/ React.createElement(Fill, {
        style: fillStyle
    }))), children);
};
