import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import useToggle from 'src/lib/common/hooks/useToggle';
import { useAppSelector } from 'src/app/redux/store';
import Modal from './ModalModule';
import css from '../../../pages/ProfilePage/ProfilePage.module.scss';
import { _cx } from 'src/utility/class';
var cx = _cx(css);
var DetailWithModal = function (_a) {
    var _b;
    var label = _a.label, _c = _a.labelIsHtml, labelIsHtml = _c === void 0 ? true : _c, modalId = _a.modalId;
    var _d = useToggle(false), showTooltip = _d.value, toggleTooltip = _d.toggleValue;
    var modalsData = useAppSelector(function (state) { return state.config.config; }).modalsData;
    var data = modalsData.find(function (data) { return data.id === modalId; });
    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cx('mdetail'), children: _jsxs("div", { className: cx('mdetail-label'), children: [labelIsHtml ? (_jsx("span", { dangerouslySetInnerHTML: {
                                __html: label === null || label === void 0 ? void 0 : label.replace('®', '<sup>®</sup>'),
                            } })) : (label), _jsx("span", { className: cx('infoIcon-small'), onClick: function () { return toggleTooltip(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" }) }) })] }) }), showTooltip && (_jsx(Modal, { setShowModal: function () { return toggleTooltip(false); }, size: (data === null || data === void 0 ? void 0 : data.width) || (data === null || data === void 0 ? void 0 : data.size) || 'sm', title: data === null || data === void 0 ? void 0 : data.title, description: data === null || data === void 0 ? void 0 : data.description, closeButton: true, children: _jsxs(_Fragment, { children: [data.image ? (_jsx("img", { width: '264px', style: { margin: '0px auto 24px auto' }, src: data.image, alt: "" })) : (_jsx(_Fragment, {})), (data === null || data === void 0 ? void 0 : data.footnote) && (_jsx("p", { className: cx('modal_footnote'), dangerouslySetInnerHTML: {
                                __html: (_b = data === null || data === void 0 ? void 0 : data.footnote) === null || _b === void 0 ? void 0 : _b.replace('®', '<sup>®</sup>'),
                            } }))] }) }))] }));
};
export default DetailWithModal;
