var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (g && (g = 0, op[0] && (_ = 0)), _) try {
            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [op[0] & 2, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
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;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useCallback, useEffect, useMemo, useState, useContext, useRef, } from 'react';
import { GlobalCtx } from '../../../components/Providers/GlobalProvider';
import { useForm } from 'src/lib/common/hooks/useForm';
import { useAppDispatch, useAppSelector } from 'src/app/redux/store';
import { setFilters } from 'src/app/redux/slices/filter';
import FilterAndSort from './Filters/FilterAndSort';
import PatientAge from './Filters/PatientAge';
import Specialty from './Filters/Specialty';
import Distance from './Filters/Distance';
import TierLevel from './Filters/TierLevel';
import { setComingFromInsideApp, setFiltersHeight as setFilterSectionHeight, } from 'src/app/redux/slices/common';
import { getAddressFromLatLng, getFiltersFromUrl } from 'src/lib/common/helpers';
import { canadaZipValidator, isEqual, isValidZip } from 'src/lib/utils';
import Modal from 'src/components/Modal/ModalModule';
import { PatientType, } from 'src/lib/types/types';
import { apiTriggerResultFilters, apiTriggerOnEnter } from 'src/lib/constants';
import Button from 'src/components/Button';
import Input from 'src/components/Input';
import Chip from 'src/components/Chip/Chip';
import css from './FilterBar.module.scss';
import { _cx } from 'src/utility/class';
import Languages from './Filters/Languages';
import Insurances from './Filters/Insurances';
import Services from './Filters/Services';
import Treatments from './Filters/Treatments';
var cx = _cx(css);
export default function FilterBar(_a) {
    var _this = this;
    var isMobile = _a.isMobile, windowSize = _a.windowSize, captchaIsLoaded = _a.captchaIsLoaded, doSearch = _a.doSearch, openFilterModal = _a.openFilterModal, setOpenFilterModal = _a.setOpenFilterModal;
    var _b = __read(useState(''), 2), showModal = _b[0], setShowModal = _b[1];
    var dispatch = useAppDispatch();
    var _c = __read(useState(80), 2), mainFiltersHeight = _c[0], setFiltersHeight = _c[1];
    var isLoading = useAppSelector(function (state) { return state.search.isLoading; });
    var comingFromInsideApp = useAppSelector(function (state) { return state.common.comingFromInsideApp; });
    var resultFilters = useAppSelector(function (state) { return state.filter.resultFilters; });
    var filters = useAppSelector(function (state) { return state.filter.filters; });
    var initGoogleAutoComplete = useContext(GlobalCtx).initGoogleAutoComplete;
    var LoadACOnce = useRef(false);
    var _d = useAppSelector(function (state) { return state.config.config; }), language = _d.language, languageData = _d.languageData, tierPins = _d.tierPins, radiusOptions = _d.radiusOptions, mainToggleFilter = _d.mainToggleFilter, defaultSort = _d.defaultSort, hideFilters = _d.hideFilters, showTierLevelFilter = _d.showTierLevelFilter, showFilters = _d.showFilters, zipUtil = _d.zipUtility, colors = _d.colors, enableGoogleSearch = _d.enableGoogleSearch, insurancesFilterOptions = _d.insurancesFilterOptions, lanuagesFilterOptions = _d.lanuagesFilterOptions, servicesOfferedFilterData = _d.servicesOfferedFilterData, localeId = _d.localeId;
    var zipUtility = useMemo(function () { return (enableGoogleSearch ? undefined : zipUtil); }, [enableGoogleSearch, zipUtil]);
    var isCa = localeId === null || localeId === void 0 ? void 0 : localeId.toLowerCase().includes('ca');
    useEffect(function () {
        if (openFilterModal) {
            setShowModal('filterAndSort');
        }
    }, [openFilterModal]);
    var t = languageData[language];
    var zip = filters.zip, patientType = filters.patientType, isOrthoDoc = filters.isOrthoDoc, isGeneralDoc = filters.isGeneralDoc, isPediatric = filters.isPediatric, radius = filters.radius, tier = filters.tier, address = filters.address, doctorName = filters.doctorName, vivera = filters.vivera, fpinsurance = filters.fpinsurance, flan = filters.flan, treatments = filters.treatments, fehours = filters.fehours, fservice = filters.fservice;
    var _e = useForm({
        customData: filters,
        onChangeDispatch: setFilters,
        apiTriggers: __spreadArray(__spreadArray([], __read(apiTriggerResultFilters), false), [mainToggleFilter], false),
        apiTriggersOnEnter: __spreadArray([], __read(apiTriggerOnEnter), false),
        emptyData: useMemo(function () { return ({
            zip: '',
            radius: '',
            address: '',
            city: '',
            state: '',
            doctorName: '',
        }); }, []),
        validations: {
            zip: {
                custom: {
                    isValid: function (value) { return isValidZip(value.trim(), isCa); },
                    message: isCa ? 'Enter Valid ZIP' : 'ZIP Code must be 5 characters long.',
                },
            },
        },
        errorOnInit: true,
        onSubmit: function (filters) { return doSearch(filters); },
    }), handleSubmit = _e.handleSubmit, handleChange = _e.handleChange, resetForm = _e.resetForm, errors = _e.errors, handleFilterApply = _e.handleFilterApply, handleKeyDown = _e.handleKeyDown;
    var doSearchIf = useCallback(function () {
        if (Object.keys(errors).length === 0) {
            if ((!comingFromInsideApp && !isEqual(resultFilters, filters)) || comingFromInsideApp) {
                doSearch();
            }
            dispatch(setComingFromInsideApp(false));
        }
    }, [errors, comingFromInsideApp, resultFilters, filters]);
    var showDoctorType = useMemo(function () { return !hideFilters || (hideFilters && !hideFilters.doctorType); }, [hideFilters, mainToggleFilter]);
    var showPediatric = useMemo(function () { return showFilters && showFilters.isPediatric; }, [showFilters, mainToggleFilter]);
    var dispatchCallback = function (_a) {
        var _b, _c;
        var geometry = _a.geometry, formatted_address = _a.formatted_address;
        if (geometry) {
            dispatch(setFilters({
                address: formatted_address,
                lat: String((_b = geometry.location) === null || _b === void 0 ? void 0 : _b.lat()),
                lng: String((_c = geometry.location) === null || _c === void 0 ? void 0 : _c.lng()),
            }));
        }
    };
    var initGoogleAutocomplete = useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    if (!initGoogleAutoComplete || LoadACOnce.current)
                        return [2 /*return*/];
                    return [4 /*yield*/, initGoogleAutoComplete('find_a_doctor', localeId || 'pt-BR', dispatchCallback)];
                case 1:
                    _a.sent();
                    LoadACOnce.current = true;
                    return [2 /*return*/];
            }
        });
    }); }, [LoadACOnce.current, initGoogleAutoComplete, localeId]);
    useEffect(function () {
        if (captchaIsLoaded) {
            doSearchIf();
        }
    }, [captchaIsLoaded]);
    useEffect(function () {
        dispatch(setFilterSectionHeight(mainFiltersHeight));
    }, [mainFiltersHeight]);
    useEffect(function () {
        var mainFilters = document.querySelector('#main-filters');
        var nav = document.querySelector('#header');
        if (mainFilters) {
            if (nav) {
                setFiltersHeight(mainFilters.clientHeight + nav.clientHeight + 15);
            }
            else {
                setFiltersHeight(mainFilters.clientHeight + 15);
            }
        }
    }, [windowSize]);
    useEffect(function () {
        if (enableGoogleSearch) {
            if (zip && !address) {
                dispatch(setFilters({ address: zip }));
            }
            initGoogleAutocomplete();
        }
    }, []);
    var viveraFromUrl = useMemo(function () { return getFiltersFromUrl(); }, []).vivera;
    var getInsurancesChipLabel = function () {
        var _a;
        var text = (_a = insurancesFilterOptions.find(function (item) { return item.value === fpinsurance[0]; })) === null || _a === void 0 ? void 0 : _a.translation;
        return text;
    };
    var getLanguagesChipLabel = function () {
        var _a;
        var text = (_a = lanuagesFilterOptions.find(function (item) { return item.value === flan[0]; })) === null || _a === void 0 ? void 0 : _a.translation;
        return text;
    };
    var getSpecialityChipLabel = function () {
        if (isOrthoDoc)
            return t.orthodontists;
        if (isGeneralDoc)
            return t.general_dentists;
        if (isPediatric)
            return t.pediatric_dentist;
        return t.chip_specialty;
    };
    var getTreatmentsChipLabel = function () {
        if (treatments.ipe)
            return t.invisalign_palatal_expanders;
        if (treatments.itero)
            return t.doctor_offers_itero;
        if (treatments.vivera_retainers)
            return t.result_vivera_label;
        if (treatments.whitening)
            return t.result_whitening_doc;
        if (treatments.invisalign_first)
            return t.label_invisalign_first;
        return '';
    };
    var getServicesChipLabel = function () {
        var _a, _b, _c, _d, _e, _f;
        if (fservice.includes('Patient Financing') ||
            (fservice === null || fservice === void 0 ? void 0 : fservice.includes(((_a = servicesOfferedFilterData === null || servicesOfferedFilterData === void 0 ? void 0 : servicesOfferedFilterData.find(function (item) { return item.value === 'Patient Financing'; })) === null || _a === void 0 ? void 0 : _a.key) ||
                'noData')))
            return t.patient_financing;
        if (fservice.includes('Financing options with no down payment') ||
            (fservice === null || fservice === void 0 ? void 0 : fservice.includes(((_b = servicesOfferedFilterData === null || servicesOfferedFilterData === void 0 ? void 0 : servicesOfferedFilterData.find(function (item) { return item.value === 'Financing options with no down payment'; })) === null || _b === void 0 ? void 0 : _b.key) || 'noData')))
            return t.financing_no_down_payment;
        if (fservice.includes('Complementary consultation') ||
            (fservice === null || fservice === void 0 ? void 0 : fservice.includes(((_c = servicesOfferedFilterData === null || servicesOfferedFilterData === void 0 ? void 0 : servicesOfferedFilterData.find(function (item) { return item.value === 'Complementary consultation'; })) === null || _c === void 0 ? void 0 : _c.key) || 'noData')))
            return t.complimentary_consultation;
        if (fservice.includes('HFD Financing') ||
            (fservice === null || fservice === void 0 ? void 0 : fservice.includes(((_d = servicesOfferedFilterData === null || servicesOfferedFilterData === void 0 ? void 0 : servicesOfferedFilterData.find(function (item) { return item.value === 'HFD Financing'; })) === null || _d === void 0 ? void 0 : _d.key) || 'noData')))
            return t.hfd_financing;
        if (fservice.includes('Invisalign Pay') ||
            (fservice === null || fservice === void 0 ? void 0 : fservice.includes(((_e = servicesOfferedFilterData === null || servicesOfferedFilterData === void 0 ? void 0 : servicesOfferedFilterData.find(function (item) { return item.value === 'Invisalign Pay'; })) === null || _e === void 0 ? void 0 : _e.key) || 'noData')))
            return t.invisalign_pay;
        if (fservice.includes('Online scheduling') ||
            (fservice === null || fservice === void 0 ? void 0 : fservice.includes(((_f = servicesOfferedFilterData === null || servicesOfferedFilterData === void 0 ? void 0 : servicesOfferedFilterData.find(function (item) { return item.value === 'Online scheduling'; })) === null || _f === void 0 ? void 0 : _f.key) ||
                'noData')))
            return t.online_scheduling;
        //@ts-ignore
        if (fehours !== 'false' && fehours !== false)
            return t.extended_hours;
        return '';
    };
    var getTierLevelChipLabel = function () {
        var selectedTier = tierPins.find(function (pins) {
            return pins.segmentCode && pins.segmentCode === tier;
        });
        return selectedTier && selectedTier.label && selectedTier.label !== ''
            ? selectedTier.label
            : t.result_tier_select_placeholder;
    };
    var getLocation = useCallback(function () {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (pos) { return __awaiter(_this, void 0, void 0, function () {
                var lat, lng, address, zip;
                var _a;
                return __generator(this, function (_b) {
                    switch (_b.label) {
                        case 0:
                            lat = String(pos.coords.latitude);
                            lng = String(pos.coords.longitude);
                            return [4 /*yield*/, getAddressFromLatLng(lat, lng)];
                        case 1:
                            address = _b.sent();
                            zip = (_a = address === null || address === void 0 ? void 0 : address.address_compnents) === null || _a === void 0 ? void 0 : _a.find(function (adr) {
                                return adr.types.includes('postal_code');
                            }).long_name;
                            if (zip)
                                dispatch(setFilters({ zip: zip.slice(0, 5) }));
                            return [2 /*return*/];
                    }
                });
            }); });
        }
        else {
            alert(t.geo_not_supported);
        }
    }, []);
    var filter = document.querySelector('#header');
    var navHeight = filter ? filter.clientHeight : 0;
    return (_jsx("div", { className: cx('filter-bar-container', {
            sticky: !isMobile,
            isMobile: isMobile,
        }), style: { top: navHeight }, id: "result-filter", "data-anchor": "stickyHeader", children: _jsx("form", { onSubmit: handleSubmit, children: _jsx("div", { className: cx('container-filter-bar'), children: _jsxs("div", { className: cx('container-fluid filter-wrap', { isMobile: isMobile }), id: "main-filters", children: [_jsx("div", { className: cx('search-area'), children: _jsxs("div", { className: cx('search-bar'), children: [_jsxs("div", { className: cx('input-box input-doctor-name'), children: [_jsx("label", { htmlFor: "doctorName", children: t.result_search_name_label }), _jsx(Input, { id: "doctorName", value: doctorName, onChange: handleChange('doctorName'), onKeyDown: function (e) { return handleKeyDown('doctorName', e); }, mode: "small-fix", placeholder: t.doctor_name_placeholder, inputStyle: {
                                                    padding: '14px 14px 14px 18px',
                                                    lineHeight: '22px',
                                                    fontWeight: '400',
                                                    fontSize: '14px',
                                                    color: '#3D3935',
                                                    height: '40px',
                                                } })] }), _jsxs("div", { className: cx('form-group input-zip'), children: [_jsx("label", { htmlFor: "find_a_doctor", children: t.result_zip_label }), _jsx(Input, { id: "find_a_doctor", value: enableGoogleSearch ? address : zip, mask: zipUtility === null || zipUtility === void 0 ? void 0 : zipUtility.mask, maskChar: zipUtility === null || zipUtility === void 0 ? void 0 : zipUtility.maskChar, onChange: function (e) {
                                                    if (isCa && !enableGoogleSearch) {
                                                        if (e.target.value.length > 7) {
                                                            return false;
                                                        }
                                                        var res = canadaZipValidator(e.target.value, zip);
                                                        if (res !== false && typeof res === 'string') {
                                                            // @ts-ignore
                                                            handleChange('zip')({ target: { value: res } });
                                                        }
                                                    }
                                                    else {
                                                        handleChange(enableGoogleSearch ? 'address' : 'zip')(e);
                                                    }
                                                }, type: zipUtility === null || zipUtility === void 0 ? void 0 : zipUtility.type, maxLength: zipUtility === null || zipUtility === void 0 ? void 0 : zipUtility.maxLength, isInValid: !enableGoogleSearch && zip.length > 0 ? Boolean(errors.zip) : undefined, placeholder: t.search_zip_input_placeholder, borderColor: colors === null || colors === void 0 ? void 0 : colors.primary, bgColor: "#ffffff", inputStyle: {
                                                    padding: '14px 14px 14px 36px',
                                                    lineHeight: '22px',
                                                    fontWeight: '400',
                                                    fontSize: '14px',
                                                    color: '#3D3935',
                                                    height: '40px',
                                                }, onSelect: function () { return __awaiter(_this, void 0, void 0, function () {
                                                    return __generator(this, function (_a) {
                                                        switch (_a.label) {
                                                            case 0:
                                                                if (!(enableGoogleSearch && initGoogleAutoComplete)) return [3 /*break*/, 2];
                                                                if (LoadACOnce.current)
                                                                    return [2 /*return*/];
                                                                LoadACOnce.current = true;
                                                                return [4 /*yield*/, initGoogleAutoComplete('find_a_doctor', localeId || 'pt-BR', dispatchCallback)];
                                                            case 1:
                                                                _a.sent();
                                                                return [3 /*break*/, 3];
                                                            case 2: return [2 /*return*/];
                                                            case 3: return [2 /*return*/];
                                                        }
                                                    });
                                                }); }, buttonProps: {
                                                    button: (_jsxs(Button, { type: "submit", disabled: isLoading || Object.keys(errors).length !== 0, styleType: "icon", dataTeliumEvent: t.event_fad_search_serp, buttonStyle: {
                                                            position: 'absolute',
                                                            right: '14px',
                                                            bottom: '7px',
                                                            padding: '0',
                                                            margin: '0',
                                                            background: 'white',
                                                            paddingLeft: '7px',
                                                        }, children: [_jsx("i", { style: { display: 'none' }, children: "submit" }), _jsx("svg", { width: "19", height: "19", viewBox: "0 0 19 19", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M16.765 18.9819L10.415 12.6319C9.91499 13.0153 9.33999 13.3236 8.68999 13.5569C8.03999 13.7903 7.34832 13.9069 6.61499 13.9069C4.76499 13.9069 3.19832 13.2609 1.91499 11.9689C0.631657 10.6776 -0.0100098 9.10693 -0.0100098 7.25693C-0.0100098 5.40693 0.631657 3.83593 1.91499 2.54393C3.19832 1.2526 4.76499 0.606934 6.61499 0.606934C8.46499 0.606934 10.036 1.2526 11.328 2.54393C12.6193 3.83593 13.265 5.40693 13.265 7.25693C13.265 7.99027 13.1527 8.68193 12.928 9.33193C12.7027 9.98193 12.3983 10.5486 12.015 11.0319L18.34 17.3819L16.765 18.9819ZM6.61499 11.6069C7.83166 11.6069 8.86499 11.1859 9.71499 10.3439C10.565 9.5026 10.99 8.4736 10.99 7.25693C10.99 6.04027 10.565 5.01093 9.71499 4.16893C8.86499 3.3276 7.83166 2.90693 6.61499 2.90693C5.39832 2.90693 4.36932 3.3276 3.52799 4.16893C2.68599 5.01093 2.26499 6.04027 2.26499 7.25693C2.26499 8.4736 2.68599 9.5026 3.52799 10.3439C4.36932 11.1859 5.39832 11.6069 6.61499 11.6069Z", fill: isLoading || Object.keys(errors).length !== 0
                                                                        ? '#3D3935'
                                                                        : '#0067ac' }) })] })),
                                                } }), _jsxs(Button, { styleType: "icon", onClick: getLocation, type: "button", color: colors === null || colors === void 0 ? void 0 : colors.black, buttonStyle: {
                                                    position: 'absolute',
                                                    left: '8px',
                                                    bottom: '7px',
                                                    padding: '0',
                                                    margin: '0',
                                                }, children: [_jsx("i", { style: { display: 'none' }, children: "search" }), _jsx("svg", { width: "21.9", height: "21.9", viewBox: "0 0 22 23", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M10 22.4501V20.4501C7.91672 20.2167 6.12938 19.3544 4.63805 17.8631C3.14605 16.3711 2.28338 14.5834 2.05005 12.5H0.0500488V10.5H2.05005C2.28338 8.41672 3.14605 6.62905 4.63805 5.13705C6.12938 3.64572 7.91672 2.78338 10 2.55005V0.550049H12V2.55005C14.0834 2.78338 15.8711 3.64572 17.3631 5.13705C18.8544 6.62905 19.7167 8.41672 19.9501 10.5H21.9501V12.5H19.9501C19.7167 14.5834 18.8544 16.3711 17.3631 17.8631C15.8711 19.3544 14.0834 20.2167 12 20.4501V22.4501H10ZM11 18.5C12.9334 18.5 14.5834 17.8167 15.95 16.45C17.3167 15.0834 18 13.4334 18 11.5C18 9.56672 17.3167 7.91672 15.95 6.55005C14.5834 5.18338 12.9334 4.50005 11 4.50005C9.06672 4.50005 7.41672 5.18338 6.05005 6.55005C4.68338 7.91672 4.00005 9.56672 4.00005 11.5C4.00005 13.4334 4.68338 15.0834 6.05005 16.45C7.41672 17.8167 9.06672 18.5 11 18.5ZM11 15.5C9.90005 15.5 8.95838 15.1084 8.17505 14.325C7.39172 13.5417 7.00005 12.6 7.00005 11.5C7.00005 10.4 7.39172 9.45838 8.17505 8.67505C8.95838 7.89172 9.90005 7.50005 11 7.50005C12.1 7.50005 13.0417 7.89172 13.825 8.67505C14.6084 9.45838 15 10.4 15 11.5C15 12.6 14.6084 13.5417 13.825 14.325C13.0417 15.1084 12.1 15.5 11 15.5Z", fill: "#3D3935" }) })] })] })] }) }), _jsx("div", { className: cx('filter-area'), children: _jsxs("div", { className: cx('filter-chip-wrapper'), children: [_jsx(Chip, { onClick: function () {
                                            setShowModal('filterAndSort');
                                        }, beforeIcon: true, afterIcon: false, active: false, children: t.result_filter_sort_chip_label || 'Filter & Sort' }), showModal === 'filterAndSort' && (_jsx(Modal, { setShowModal: function () {
                                            setShowModal('');
                                            setOpenFilterModal(false);
                                        }, size: "sm", modalHeader: t.filter_modal_header, children: _jsx(FilterAndSort, { filters: filters, t: t, defaultSort: defaultSort, onFilterApply: handleFilterApply, showPediatric: !!showPediatric, closeModal: function () {
                                                setShowModal('');
                                                setOpenFilterModal(false);
                                            }, radiusOptions: radiusOptions, tierPins: tierPins }) })), _jsx(Chip, { onClick: function () {
                                            setShowModal('patientAge');
                                        }, afterIcon: true, active: !!patientType, children: patientType === PatientType.TEEN ? t.result_age_teen : t.result_age_adult }), showModal === 'patientAge' && (_jsx(Modal, { setShowModal: function () { return setShowModal(''); }, size: "sm", modalHeader: t.filter_modal_header, children: _jsx(PatientAge, { filters: filters, t: t, defaultSort: defaultSort, onFilterApply: handleFilterApply, closeModal: function () { return setShowModal(''); } }) })), showDoctorType && (_jsxs(_Fragment, { children: [_jsx(Chip, { onClick: function () {
                                                    setShowModal('specialty');
                                                }, afterIcon: true, active: isOrthoDoc || isGeneralDoc || isPediatric, children: getSpecialityChipLabel() }), showModal === 'specialty' && (_jsx(Modal, { setShowModal: function () { return setShowModal(''); }, size: "sm", modalHeader: t.filter_modal_header, children: _jsx(Specialty, { filters: filters, t: t, onFilterApply: handleFilterApply, showPediatric: !!showPediatric, closeModal: function () { return setShowModal(''); } }) }))] })), showModal === 'distance' && (_jsx(Modal, { setShowModal: function () { return setShowModal(''); }, size: "sm", modalHeader: t.filter_modal_header, children: _jsx(Distance, { filters: filters, t: t, onFilterApply: handleFilterApply, radiusOptions: radiusOptions, closeModal: function () { return setShowModal(''); } }) })), showTierLevelFilter && (_jsxs(_Fragment, { children: [_jsx(Chip, { onClick: function () {
                                                    setShowModal('tierLevel');
                                                }, afterIcon: true, active: !!tier, children: getTierLevelChipLabel() }), showModal === 'tierLevel' && (_jsx(Modal, { setShowModal: function () { return setShowModal(''); }, size: "sm", modalHeader: t.filter_modal_header, subTitle: t.tier_filter_title || 'Doctor Tier Level', description: t.tier_filter_description ||
                                                    'The tier levels listed below reflect the number of Invisalign® aligner treatments prescribed by a doctor. They range from fewest (Bronze) to most (Diamond Plus). Valued Invisalign Providers (VIP) are orthodontists who have treated a greater percentage of practice’s cases with Invisalign aligners.', children: _jsx(TierLevel, { filters: filters, t: t, onFilterApply: handleFilterApply, tierPins: tierPins, closeModal: function () { return setShowModal(''); } }) }))] })), fpinsurance && fpinsurance.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Chip, { onClick: function () {
                                                    setShowModal('insurances');
                                                }, afterIcon: true, active: true, children: getInsurancesChipLabel() }), showModal === 'insurances' && (_jsx(Modal, { setShowModal: function () { return setShowModal(''); }, size: "sm", modalHeader: t.filter_modal_header, children: _jsx(Insurances, { filters: filters, t: t, onFilterApply: handleFilterApply, closeModal: function () { return setShowModal(''); } }) }))] })), flan && flan.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Chip, { onClick: function () {
                                                    setShowModal('languages');
                                                }, afterIcon: true, active: true, children: getLanguagesChipLabel() }), showModal === 'languages' && (_jsx(Modal, { setShowModal: function () { return setShowModal(''); }, size: "sm", modalHeader: t.filter_modal_header, children: _jsx(Languages, { filters: filters, t: t, onFilterApply: handleFilterApply, closeModal: function () { return setShowModal(''); } }) }))] })), getServicesChipLabel() !== '' && (_jsxs(_Fragment, { children: [_jsx(Chip, { onClick: function () {
                                                    setShowModal('services');
                                                }, afterIcon: true, active: true, children: getServicesChipLabel() }), showModal === 'services' && (_jsx(Modal, { setShowModal: function () { return setShowModal(''); }, size: "sm", modalHeader: t.filter_modal_header, children: _jsx(Services, { filters: filters, t: t, onFilterApply: handleFilterApply, closeModal: function () { return setShowModal(''); } }) }))] })), getTreatmentsChipLabel() !== '' && (_jsxs(_Fragment, { children: [_jsx(Chip, { onClick: function () {
                                                    setShowModal('treatments');
                                                }, afterIcon: true, active: true, children: getTreatmentsChipLabel() }), showModal === 'treatments' && (_jsx(Modal, { setShowModal: function () { return setShowModal(''); }, size: "sm", modalHeader: t.filter_modal_header, children: _jsx(Treatments, { filters: filters, t: t, onFilterApply: handleFilterApply, closeModal: function () { return setShowModal(''); } }) }))] })), radius && radius.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Chip, { onClick: function () {
                                                    setShowModal('distance');
                                                }, afterIcon: true, active: true, children: radius + ' ' + t.miles }), showModal === 'distance' && (_jsx(Modal, { setShowModal: function () { return setShowModal(''); }, size: "sm", modalHeader: t.filter_modal_header, children: _jsx(Distance, { filters: filters, t: t, radiusOptions: radiusOptions.slice(1, undefined), onFilterApply: handleFilterApply, closeModal: function () { return setShowModal(''); } }) }))] }))] }) })] }) }) }) }));
}
