var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useMemo } from 'react';
import CheckBox from 'src/components/CheckBox2/CheckBox';
import Button from 'src/components/Button';
import { useAppSelector } from 'src/app/redux/store';
import css from '../FilterBar.module.scss';
import { _cx } from 'src/utility/class';
import Modal from 'src/components/Modal/ModalModule';
var cx = _cx(css);
var Treatments = function (_a) {
    var _b;
    var filters = _a.filters, t = _a.t, onFilterApply = _a.onFilterApply, closeModal = _a.closeModal;
    var _c = useAppSelector(function (state) { return state.config.config; }), modalsData = _c.modalsData, useDocLoc3O = _c.useDocLoc3O, hideFilters = _c.hideFilters;
    var isOrthoDoc = filters.isOrthoDoc, treatments = filters.treatments;
    var _d = __read(useState(isOrthoDoc || false), 2), orthoDoc = _d[0], setOrthoDoc = _d[1];
    var _e = __read(useState(false), 2), showModal = _e[0], setShowModal = _e[1];
    var _f = __read(useState(), 2), modalData = _f[0], setModalData = _f[1];
    var updateModalInfo = function (modal_id) {
        var modaldata = modalsData.find(function (item) { return item.id === modal_id; });
        setModalData(modaldata);
    };
    var _g = __read(useState({
        vivera_retainers: (treatments === null || treatments === void 0 ? void 0 : treatments.vivera_retainers) || false,
        whitening: (treatments === null || treatments === void 0 ? void 0 : treatments.whitening) || false,
        ipe: (treatments === null || treatments === void 0 ? void 0 : treatments.ipe) || false,
        itero: (treatments === null || treatments === void 0 ? void 0 : treatments.itero) || false,
        invisalign_first: (treatments === null || treatments === void 0 ? void 0 : treatments.invisalign_first) || false,
    }), 2), treatmentsOfferedState = _g[0], setTreatmentsOfferedState = _g[1];
    var applyFilter = function () {
        onFilterApply('isOrthoDoc', orthoDoc, [
            { key: 'treatments', value: treatmentsOfferedState },
        ]);
        closeModal();
    };
    var clearFilters = function () {
        var offObject = {
            vivera_retainers: false,
            whitening: false,
            ipe: false,
            itero: false,
            invisalign_first: false,
        };
        setTreatmentsOfferedState(offObject);
        onFilterApply('isOrthoDoc', orthoDoc, [
            {
                key: 'treatments',
                value: offObject,
            },
        ]);
        closeModal();
    };
    var showVivera = useMemo(function () { return !hideFilters || (hideFilters && !hideFilters.viveraFilter); }, [hideFilters]);
    return (_jsxs("div", { children: [_jsxs("div", { className: cx('form-group filter-specialty'), children: [_jsx("label", { className: "filter-title", children: t.treatments_offered }), _jsxs("div", { className: cx('checkbox-wrap'), children: [_jsx(CheckBox, { checked: treatmentsOfferedState.itero, onChange: function () {
                                    setTreatmentsOfferedState(function (pre) {
                                        return __assign(__assign({}, pre), { itero: treatmentsOfferedState.itero ? false : true });
                                    });
                                }, label: t.doctor_offers_itero, name: "itero", width: "100%", showInfoIcon: true, infoClickHandler: function () {
                                    updateModalInfo('itero');
                                    setShowModal(true);
                                } }), !(hideFilters === null || hideFilters === void 0 ? void 0 : hideFilters.whitening) && (_jsx(CheckBox, { checked: treatmentsOfferedState.whitening, onChange: function () {
                                    setTreatmentsOfferedState(function (pre) {
                                        return __assign(__assign({}, pre), { whitening: treatmentsOfferedState.whitening ? false : true });
                                    });
                                }, label: t.result_whitening_doc, name: "whitening", width: "100%", showInfoIcon: true, infoClickHandler: function () {
                                    updateModalInfo('whitening');
                                    setShowModal(true);
                                } })), showVivera && (_jsx(CheckBox, { checked: treatmentsOfferedState.vivera_retainers, onChange: function () {
                                    setTreatmentsOfferedState(function (pre) {
                                        return __assign(__assign({}, pre), { vivera_retainers: treatmentsOfferedState.vivera_retainers ? false : true });
                                    });
                                }, label: t.result_vivera_label, name: "vivera_retainers", width: "100%", showInfoIcon: true, infoClickHandler: function () {
                                    updateModalInfo('vivera');
                                    setShowModal(true);
                                } })), useDocLoc3O && (_jsxs(_Fragment, { children: [!(hideFilters === null || hideFilters === void 0 ? void 0 : hideFilters.invisalign_first) && (_jsx(CheckBox, { checked: treatmentsOfferedState.invisalign_first, onChange: function () {
                                            setTreatmentsOfferedState(function (pre) {
                                                return __assign(__assign({}, pre), { invisalign_first: treatmentsOfferedState.invisalign_first ? false : true });
                                            });
                                        }, label: t.label_invisalign_first, name: "invisalign_first", width: "100%", showInfoIcon: true, infoClickHandler: function () {
                                            updateModalInfo('invisalignFirst');
                                            setShowModal(true);
                                        } })), !(hideFilters === null || hideFilters === void 0 ? void 0 : hideFilters.invisalign_palatal_expanders) && (_jsx(CheckBox, { checked: treatmentsOfferedState.ipe, onChange: function () {
                                            setTreatmentsOfferedState(function (pre) {
                                                return __assign(__assign({}, pre), { ipe: treatmentsOfferedState.ipe ? false : true });
                                            });
                                        }, label: t.invisalign_palatal_expanders, name: "ipe", width: "100%", showInfoIcon: true, infoClickHandler: function () {
                                            updateModalInfo('palatal_expanders');
                                            setShowModal(true);
                                        } }))] }))] }), _jsx("hr", {}), _jsxs("div", { className: "flex-space-between", children: [_jsx(Button, { type: "submit", styleType: "cancel", onClick: clearFilters, children: t.result_clear_filter }), _jsx(Button, { type: "submit", styleType: "normal", onClick: applyFilter, children: t.result_filter_button_apply })] })] }), showModal && modalData && (_jsx(Modal, { setShowModal: function () { return setShowModal(false); }, size: modalData.width || 'sm', subTitle: modalData === null || modalData === void 0 ? void 0 : modalData.title, description: modalData === null || modalData === void 0 ? void 0 : modalData.description, closeButton: true, children: _jsxs(_Fragment, { children: [modalData.image ? (_jsx("img", { width: '264px', style: { margin: '0px auto 24px auto' }, src: modalData.image, alt: "" })) : (_jsx(_Fragment, {})), (modalData === null || modalData === void 0 ? void 0 : modalData.footnote) && (_jsx("p", { className: cx('modal_footnote'), dangerouslySetInnerHTML: {
                                __html: (_b = modalData === null || modalData === void 0 ? void 0 : modalData.footnote) === null || _b === void 0 ? void 0 : _b.replace('®', '<sup>®</sup>'),
                            } }))] }) }))] }));
};
export default Treatments;
