import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import { useAppSelector } from 'src/app/redux/store';
import useToggle from 'src/lib/common/hooks/useToggle';
import Modal from 'src/components/Modal/DetailModal/ModalModule';
import css from './DoctorProfile.module.scss';
import { _cx } from 'src/utility/class';
var cx = _cx(css);
export default function Advantage(_a) {
    var t = _a.t, data = _a.data;
    var _b = useAppSelector(function (state) { return state.config.config; }), tierPins = _b.tierPins, colors = _b.colors, hideLabels = _b.hideLabels, modalsData = _b.modalsData, country = _b.country;
    var tierData = tierPins.find(function (pins) { return pins.segmentCode === data.advantage_level; });
    var _c = useToggle(false), showSegmentTooltip = _c.value, setSegmentTooltip = _c.toggleValue;
    var showVip = useMemo(function () { return !hideLabels || (hideLabels && !hideLabels.vip); }, [hideLabels]);
    var modaldata = modalsData.find(function (item) { return item.id === 'tierLevel'; });
    return (_jsxs("div", { className: cx('advantage-container'), children: [_jsx("span", { style: { color: (colors === null || colors === void 0 ? void 0 : colors.black) ? colors.black : '#ffffff' }, children: "".concat(data.is_vip && showVip ? "VIP " : "").concat((tierData === null || tierData === void 0 ? void 0 : tierData.label) || t.no_tier_label) }), _jsx("span", { className: cx('infoIcon-small'), onClick: function () { return setSegmentTooltip(true); }, children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V9H11V15ZM11 7H9V5H11V7Z", fill: "#727272" }) }) }), showSegmentTooltip && (_jsx(Modal, { setShowModal: function () { return setSegmentTooltip(false); }, size: (modaldata === null || modaldata === void 0 ? void 0 : modaldata.size) ? modaldata.size : 'lg', title: modaldata === null || modaldata === void 0 ? void 0 : modaldata.title, description: modaldata === null || modaldata === void 0 ? void 0 : modaldata.description, closeButton: true, subTitle: _jsx("div", { className: "tier-icons-container", children: tierPins.map(function (tier) {
                        var label = tier.label, imgUrl = tier.imgUrl;
                        if (tier.label === 'VIP')
                            return _jsx(_Fragment, {});
                        return (_jsxs("div", { className: "tier-icon", children: [_jsx("img", { className: "pin", src: imgUrl }), _jsx("div", { className: "tier-label", children: label })] }, label));
                    }) }) }))] }));
}
