var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import css from '../FilterBar.module.scss';
import { _cx } from 'src/utility/class';
import Button from 'src/components/Button';
var cx = _cx(css);
var Distance = function (_a) {
    var filters = _a.filters, t = _a.t, onFilterApply = _a.onFilterApply, radiusOptions = _a.radiusOptions, closeModal = _a.closeModal;
    var radius = filters.radius;
    var _b = __read(useState(radiusOptions.findIndex(function (item) { return item.value === radius; })), 2), state = _b[0], setState = _b[1];
    var applyFilter = function () {
        var _a;
        onFilterApply('radius', (_a = radiusOptions[state]) === null || _a === void 0 ? void 0 : _a.value);
        closeModal();
    };
    var handleChange = function (e) {
        setState(e.target.value);
    };
    return (_jsxs("div", { className: cx('distance-range'), children: [_jsx("label", { className: "filter-title", htmlFor: "radius", children: t.result_radius_label }), _jsxs("div", { className: cx('distance-wrap'), children: [_jsx("div", { className: cx('range-filter-wrapper'), children: _jsx("input", { className: cx('range-filter'), type: "range", value: state, min: "0", max: radiusOptions.length - 1, step: "1", onChange: handleChange }) }), _jsx("ul", { className: "distance-range-ref ".concat(cx('distance-labels')), children: radiusOptions.map(function (radius, idx) {
                            return _jsx("li", { children: radius.label }, idx);
                        }) })] }), _jsx("hr", {}), _jsxs("div", { className: "flex-space-between", children: [_jsx(Button, { type: "submit", styleType: "cancel", onClick: closeModal, children: t.result_sort_button_cancel }), _jsx(Button, { type: "submit", styleType: "normal", onClick: applyFilter, children: t.result_filter_button_apply })] })] }));
};
export default Distance;
