import { __rest, __assign } from '../../node_modules/tslib/tslib.es6.js';
import React, { useState, useEffect } from 'react';
import RangeSliderWithScale from '../rangeSlider/RangeSliderWithScale.js';
import RangeSliderWithChart from '../rangeSlider/RangeSliderWithChart.js';
import RangeFilterInput from '../rangeFilterInput/index.js';
import Flex from '../flex/index.js';
import { Box } from '@chakra-ui/react';

function RangeFilterInputWithSlider(_a) {
    var rangeSliderScale = _a.rangeSliderScale, facets = _a.facets, unit = _a.unit, onChange = _a.onChange, from = _a.from, to = _a.to, chartHeight = _a.chartHeight, rest = __rest(_a, ["rangeSliderScale", "facets", "unit", "onChange", "from", "to", "chartHeight"]);
    var value = {
        min: from.value,
        max: to.value,
    };
    var _b = useState(value), valuesWhileSliding = _b[0], setValuesWhileSliding = _b[1];
    var _c = useState(false), isSliding = _c[0], setIsSliding = _c[1];
    useEffect(function () {
        setValuesWhileSliding({
            min: from.value,
            max: to.value,
        });
    }, [from.value, to.value]);
    var handleSliderChange = function (event) {
        if (!isSliding) {
            setIsSliding(true);
        }
        setValuesWhileSliding(function (prevValuesWhileSliding) {
            var _a;
            return (__assign(__assign({}, prevValuesWhileSliding), (_a = {}, _a[event.touched] = event.value[event.touched], _a)));
        });
    };
    var handleSliderRelease = function (event) {
        setIsSliding(false);
        onChange({
            name: event.touched === 'min' ? from.name : to.name,
            value: event.value[event.touched],
            changeType: 'slider',
        });
    };
    var isFilterApplied = function () {
        return valuesWhileSliding.min === from.value &&
            valuesWhileSliding.max === to.value;
    };
    var appliedValue = function () {
        if (isSliding || !isFilterApplied()) {
            return valuesWhileSliding;
        }
        else {
            return value;
        }
    };
    var handleInputChange = function (event) {
        var _a;
        // sync slider with input
        setValuesWhileSliding(__assign(__assign({}, valuesWhileSliding), (_a = {}, _a[event.name === from.name ? 'min' : 'max'] = event.value, _a)));
        onChange(__assign(__assign({}, event), { changeType: 'inputfield' }));
    };
    return (React.createElement(Flex, { direction: "column" },
        React.createElement(Box, { order: { base: 1, sm: 0 }, px: "md", py: { base: 'md', sm: 0 } }, facets ? (React.createElement(RangeSliderWithChart, { onSliderChange: handleSliderChange, onSliderRelease: handleSliderRelease, selection: appliedValue(), facets: facets, chartHeight: chartHeight })) : (React.createElement(RangeSliderWithScale, { onSliderChange: handleSliderChange, onSliderRelease: handleSliderRelease, selection: appliedValue(), scale: rangeSliderScale }))),
        React.createElement(RangeFilterInput, __assign({ from: __assign(__assign({}, from), { value: appliedValue().min }), to: __assign(__assign({}, to), { value: appliedValue().max }), handleChange: handleInputChange, onBlur: handleInputChange, unit: unit }, rest))));
}

export { RangeFilterInputWithSlider as default };
//# sourceMappingURL=index.js.map
