import { __assign, __rest } from "tslib";
import React, { forwardRef, useRef, useMemo, useEffect } from "react";
import P2 from "../typography/P2";
import { SliderWrapper, TagStyled, SliderLeadTextWrapper, SliderTrailTextWrapper, SliderInputStyled } from "./styles";
import { useSlider } from "./helpers/useSlider";
import { defaultTooltipFormatter } from "./helpers/defaultTooltipFormatter";
export var SliderComponent = function (props, ref) {
    var _a = props.isDisabled, isDisabled = _a === void 0 ? false : _a, value = props.value, _b = props.isRange, isRange = _b === void 0 ? false : _b, _c = props.max, max = _c === void 0 ? 100 : _c, _d = props.min, min = _d === void 0 ? 0 : _d, _e = props.step, step = _e === void 0 ? 1 : _e, onChange = props.onChange, _f = props.direction, direction = _f === void 0 ? "horizontal" : _f, defaultValue = props.defaultValue, isReset = props.isReset, leadText = props.leadText, trailText = props.trailText, _g = props.status, status = _g === void 0 ? "info" : _g, _h = props.isTooltip, isTooltip = _h === void 0 ? true : _h, _j = props.size, size = _j === void 0 ? "m" : _j, className = props.className, _k = props.tooltipFormatter, tooltipFormatter = _k === void 0 ? defaultTooltipFormatter : _k, style = props.style, width = props.width, height = props.height, _l = props.testId, testId = _l === void 0 ? "slider" : _l, otherProps = __rest(props, ["isDisabled", "value", "isRange", "max", "min", "step", "onChange", "direction", "defaultValue", "isReset", "leadText", "trailText", "status", "isTooltip", "size", "className", "tooltipFormatter", "style", "width", "height", "testId"]);
    var leftHintRef = useRef(null);
    var rightHintRef = useRef(null);
    var fromInputRef = useRef(null);
    var toInputRef = useRef(null);
    var sliderControlRef = useRef(null);
    var fromDefaultValue = useMemo(function () {
        if (isRange) {
            if (typeof value[0] === "number") {
                return value[0];
            }
            else if (defaultValue && typeof defaultValue[0] === "number") {
                return defaultValue[0];
            }
        }
        return min;
    }, [isRange, defaultValue, value]);
    var toDefaultValue = useMemo(function () {
        if (isRange) {
            if (typeof value[1] === "number") {
                return value[1];
            }
            else if (defaultValue && typeof defaultValue[1] === "number") {
                return defaultValue[1];
            }
        }
        else if (typeof value === "number") {
            return value;
        }
        else if (typeof defaultValue === "number") {
            return defaultValue;
        }
        return max;
    }, [isRange, defaultValue, value]);
    useEffect(function () {
        if (direction === "vertical" && sliderControlRef.current) {
            if (toInputRef.current) {
                toInputRef.current.style.width = sliderControlRef.current.clientHeight + "px";
            }
            if (fromInputRef.current) {
                fromInputRef.current.style.width = sliderControlRef.current.clientHeight + "px";
            }
        }
        else {
            if (toInputRef.current) {
                toInputRef.current.style.removeProperty("width");
            }
            if (fromInputRef.current) {
                fromInputRef.current.style.removeProperty("width");
            }
        }
    }, [direction]);
    var _m = useSlider({
        isDisabled: isDisabled,
        isRange: isRange,
        value: value,
        min: min,
        max: max,
        step: step,
        onChange: onChange,
        hintsRef: [leftHintRef, rightHintRef],
        direction: direction,
        defaultValue: defaultValue,
        inputsRef: [fromInputRef, toInputRef],
        status: status
    }), currentValue = _m.currentValue, handleFromInput = _m.handleFromInput, handleToInput = _m.handleToInput, onResetRight = _m.onResetRight, onResetLeft = _m.onResetLeft, handleClick = _m.handleClick;
    return (React.createElement(SliderWrapper, __assign({ size: size, className: className, style: style, ref: ref, direction: direction, width: width, height: height, "data-testid": testId }, otherProps),
        (leadText || (trailText && direction === "horizontal")) && (React.createElement(SliderLeadTextWrapper, { size: size },
            leadText && (React.createElement(P2, { type: "corvus", className: "slider__lead-text" }, leadText)),
            trailText && direction === "horizontal" && (React.createElement(P2, { type: "corvus", className: "slider__trail-text" }, trailText)))),
        React.createElement("div", { className: "sliders_control", onMouseDown: handleClick, ref: sliderControlRef },
            isTooltip && isRange && (React.createElement(TagStyled, { sizeSlider: size, direction: direction, ref: leftHintRef, size: "xs", isClosable: isReset && !isDisabled, onClickClose: onResetLeft }, tooltipFormatter(currentValue[0]))),
            isTooltip && (React.createElement(TagStyled, { sizeSlider: size, direction: direction, ref: rightHintRef, size: "xs", isClosable: isReset && !isDisabled, onClickClose: onResetRight }, tooltipFormatter(isRange ? currentValue[1] : currentValue))),
            isRange && direction === "horizontal" && (React.createElement(SliderInputStyled, { direction: direction, sizeS: size, status: status, ref: fromInputRef, id: "fromSlider", type: "range", step: step, defaultValue: fromDefaultValue, min: min, max: max, onInput: handleFromInput, disabled: isDisabled })),
            React.createElement(SliderInputStyled, { direction: direction, sizeS: size, status: status, step: step, ref: toInputRef, id: "toSlider", type: "range", defaultValue: toDefaultValue, min: min, max: max, onInput: handleToInput, disabled: isDisabled }),
            isRange && direction === "vertical" && (React.createElement(SliderInputStyled, { direction: direction, sizeS: size, status: status, ref: fromInputRef, id: "fromSlider", type: "range", step: step, defaultValue: fromDefaultValue, min: min, max: max, onInput: handleFromInput, disabled: isDisabled }))),
        trailText && direction === "vertical" && (React.createElement(SliderTrailTextWrapper, { direction: direction, size: size },
            React.createElement(P2, { type: "corvus", className: "slider__trail-text" }, trailText)))));
};
export default forwardRef(SliderComponent);
