"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var replace_1 = __importDefault(require("lodash/replace"));
var styled_components_1 = require("styled-components");
var no_select_1 = require("@monstrosity/utilities/common-styles/no-select");
var themed_components_1 = __importDefault(require("@monstrosity/utilities/themed-components"));
var react_inlinesvg_1 = __importDefault(require("react-inlinesvg"));
var Container = themed_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 100%;\n    height: 100%;\n    background: ", ";\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n\n    & svg {\n        width: 100%;\n        height: 100%;\n    }    \n\n    ", "\n"], ["\n    width: 100%;\n    height: 100%;\n    background: ", ";\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n\n    & svg {\n        width: 100%;\n        height: 100%;\n    }    \n\n    ", "\n"])), function (_a) {
    var theme = _a.theme;
    return theme.style.colour.background;
}, no_select_1.noSelect);
var Text = themed_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-size: 1.5rem;\n    color: #4B0082;\n    text-align: center;\n    margin-bottom: 1rem;\n"], ["\n    font-size: 1.5rem;\n    color: #4B0082;\n    text-align: center;\n    margin-bottom: 1rem;\n"])));
/*
class CoverBase extends React.Component<CoverProps> {
    getSvgContent = (svg?: Element) => {
        if (!svg) return '';
        
        const element = svg.querySelector('defs style');
        if (!element) return '';

        return element.innerHTML;
    }

    beforeInjection = (error: Error | null, svg?: Element): void => {
        const props = this.props as CoverAndThemeProps;
        if (!props.theme) return;

        const colour = props.theme.style.colour;

        let styles = this.getSvgContent(svg);
        
        styles = replace(styles, '#f0f2ff', colour.constrast);
        styles = replace(styles, '#d6daff', colour.disabled.background);
        styles = replace(styles, '#4550e5', colour.highlight);
        
        const element = svg && svg.querySelector('defs style');
        if (element) element.innerHTML = styles;
    }

    render() {
        const {
            illustration,
            content,
        } = this.props;

        return (
            <Container>
                <ReactSVG
                    src={require(`./Vectors/${illustration}.svg`)}
                    afterInjection={this.beforeInjection}
                />
                {
                    content && <Text>
                        {content}
                    </Text>
                }
            </Container>
        );
    }
};
*/
var CB = /** @class */ (function (_super) {
    __extends(CB, _super);
    function CB() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.getSvgContent = function (svg) {
            if (!svg)
                return '';
            var element = svg.querySelector('defs style');
            if (!element)
                return '';
            return element.innerHTML;
        };
        _this.process = function (data) {
            var props = _this.props;
            if (!props.theme)
                return data;
            var rootElement = new DOMParser()
                .parseFromString(data, 'image/svg+xml');
            var element = rootElement.querySelector('svg');
            if (!element)
                return data;
            var colour = props.theme.style.colour;
            var styles = _this.getSvgContent(element);
            styles = replace_1.default(styles, '#f0f2ff', colour.constrast);
            styles = replace_1.default(styles, '#d6daff', colour.disabled.background);
            styles = replace_1.default(styles, '#4550e5', colour.highlight);
            var styledSvg = new DOMParser()
                .parseFromString(data, 'image/svg+xml');
            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
            styledSvg.querySelector('style').outerHTML = "<style>" + styles + "</style>";
            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
            return styledSvg.querySelector('svg').outerHTML;
        };
        return _this;
    }
    CB.prototype.render = function () {
        var _a = this.props, illustration = _a.illustration, content = _a.content;
        return (react_1.default.createElement(Container, null,
            react_1.default.createElement(react_inlinesvg_1.default, { src: require("./Vectors/" + illustration + ".svg"), preProcessor: this.process }),
            content && react_1.default.createElement(Text, null, content)));
    };
    return CB;
}(react_1.default.Component));
exports.Cover = styled_components_1.withTheme(CB);
var templateObject_1, templateObject_2;
