"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.isAdaptableIcon = exports.isAdaptableElementIcon = exports.isAdaptableCustomIcon = exports.isAdaptableSystemIcon = exports.IconComponent = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const icons_1 = require("../icons");
const join_1 = tslib_1.__importDefault(require("../utils/join"));
const react_1 = require("react");
const IconComponent = (props) => {
    const { icon, iconClassName } = props;
    if (!icon) {
        return null;
    }
    const className = !(0, exports.isAdaptableElementIcon)(icon)
        ? (0, join_1.default)(icon.className, iconClassName)
        : iconClassName;
    const divRef = (0, react_1.useRef)(null);
    (0, react_1.useEffect)(() => {
        let htmlElement;
        if ((0, exports.isAdaptableElementIcon)(icon)) {
            if (typeof icon.element === 'string') {
                const domParser = new DOMParser();
                htmlElement = domParser.parseFromString(icon.element, 'text/html').body
                    .firstChild;
            }
            else {
                htmlElement = icon.element;
                // THe element neets to be cloned.
                // when it is used in more than one plce the element is removed from the DOM
                htmlElement = htmlElement.cloneNode(true);
            }
            divRef.current.insertAdjacentElement('afterend', htmlElement);
        }
        return () => {
            if ((0, exports.isAdaptableElementIcon)(icon)) {
                htmlElement?.remove();
            }
        };
    }, [icon]);
    if ((0, exports.isAdaptableSystemIcon)(icon) && icon.name in icons_1.allIcons) {
        return (React.createElement(icons_1.Icon, { name: icon.name, size: icon.size, style: icon.style, className: className }));
    }
    if ((0, exports.isAdaptableCustomIcon)(icon)) {
        let width = icon.style?.width ?? 'var(--ab-cmp-icon__width)';
        let height = icon.style?.height ?? 'var(--ab-cmp-icon__height)';
        const iconStyle = icon.style ?? {};
        return React.createElement("img", { src: icon.src, className: className, style: { height, width, ...iconStyle } });
    }
    if ((0, exports.isAdaptableElementIcon)(icon)) {
        return (React.createElement("span", { ref: divRef, style: { display: 'none' }, "data-name": "adaptable-icon-placeholder" }));
    }
    return null;
};
exports.IconComponent = IconComponent;
const isAdaptableSystemIcon = (icon) => {
    return typeof icon?.name === 'string';
};
exports.isAdaptableSystemIcon = isAdaptableSystemIcon;
const isAdaptableCustomIcon = (icon) => {
    return typeof icon?.src === 'string';
};
exports.isAdaptableCustomIcon = isAdaptableCustomIcon;
const isAdaptableElementIcon = (icon) => {
    return ((typeof HTMLElement === 'function' &&
        icon?.element instanceof HTMLElement) ||
        typeof icon?.element === 'string');
};
exports.isAdaptableElementIcon = isAdaptableElementIcon;
const isAdaptableIcon = (icon) => {
    return (0, exports.isAdaptableSystemIcon)(icon) || (0, exports.isAdaptableCustomIcon)(icon) || (0, exports.isAdaptableElementIcon)(icon);
};
exports.isAdaptableIcon = isAdaptableIcon;
