import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { clsx } from 'clsx';
import { Component } from 'react';
import ReactModal from 'react-modal';
import { Config, gaEvent } from '../config.js';
/**
 * FeatureUpdates is a re-implementation of @linzjs/lui -> LuiUpdatesSplashModal module,
 * This use to enable a one off pop up screen for introduce new feature of the recent release.
 *
 */
export class FeatureUpdates extends Component {
    constructor(props) {
        super(props);
        Object.defineProperty(this, "handleClose", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: () => {
                this.setState({ showModal: false });
                window.localStorage.setItem(this.props.id, this.props.dismissedKey);
                gaEvent("Ui" /* GaEvent.Ui */, `news:${this.props.id.toLowerCase()}:close`);
            }
        });
        const id = window.localStorage.getItem(this.props.id);
        this.state = {
            showModal: this.props.enabled && this.props.dismissedKey !== id && this.props.closingDate >= new Date(),
        };
    }
    render() {
        const { header, wrapperClass, children, bigImage, smallImage } = this.props;
        const { showModal } = this.state;
        if (!showModal)
            return null;
        if (Config.map.isDebug)
            return;
        gaEvent("Ui" /* GaEvent.Ui */, `news:${this.props.id.toLowerCase()}:open`);
        return (_jsx(ReactModal, { isOpen: showModal, shouldCloseOnEsc: true, onRequestClose: this.handleClose, shouldCloseOnOverlayClick: true, contentLabel: "Recent updates", className: "lui-splash-content lui-box-shadow", overlayClassName: "splash_overlay", appElement: document.getElementById('main') || undefined, children: _jsxs("div", { className: clsx('lui-large-feature-notification', wrapperClass), children: [_jsxs("div", { className: "lui-feature-header", children: [_jsxs("div", { className: "lui-feature-title-wrapper", children: [this.WhatsNewIcon(), _jsx("h1", { children: header })] }), _jsx("button", { "aria-label": "Close dialog", onClick: this.handleClose, children: this.ClearIcon() })] }), this.FeatureImages(bigImage, smallImage), _jsx("div", { className: "lui-feature-text", children: children })] }) }));
    }
    FeatureImages(bigImage, smallImage) {
        return (_jsxs("div", { className: "lui-feature-img", children: [_jsx("img", { className: "lui-hide-xs lui-hide-sm", alt: "What's new", src: bigImage }), _jsx("img", { className: "lui-hide-md lui-hide-lg lui-hide-xl", alt: "What's new", src: smallImage })] }));
    }
    // @linzjs/lui whats_new_icon re-implementation
    WhatsNewIcon() {
        return (_jsx("span", { className: 'LuiIcon LuiIcon--md lui-feature-title-icon ', "data-icon": 'ic_whats_new_updates', "aria-label": 'whats_new_icon', children: _jsx("img", { src: "assets/whats_new_updates.svg", alt: "whats_new_icon" }) }));
    }
    // @linzjs/lui cross_icon re-implementation
    ClearIcon() {
        return (_jsx("span", { className: "LuiIcon LuiIcon--md LuiIcon--interactive", "data-icon": "ic_clear", "aria-label": "cross_icon", children: _jsx("img", { src: "/assets/clear.svg", alt: "cross_icon" }) }));
    }
}
//# sourceMappingURL=feature.updates.js.map