import { __makeTemplateObject } from "tslib";
/** @jsx jsx */
import { css, jsx } from '@emotion/core';
import logo from '../Header/dash4_512.png';
import { DURATION_HIDE_ANIMATION } from './constants';
import { useHidden, useMinimalWait } from './hooks';
export var AppLoader = function (_a) {
    var visible = _a.visible, _b = _a.minWait, minWait = _b === void 0 ? 1000 : _b;
    var isMinimalWaitReached = useMinimalWait({
        visible: visible,
        minWait: minWait,
    });
    var isHidden = useHidden({
        visible: visible,
        isMinimalWaitReached: isMinimalWaitReached,
    });
    var isHidding = !visible && isMinimalWaitReached;
    return (jsx("div", { css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\t\t\tposition: fixed;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100vw;\n\t\t\t\theight: 100vh;\n\t\t\t\tzindex: 9999;\n\t\t\t\tbackground: #fff;\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: center;\n\t\t\t\talign-items: center;\n\t\t\t\ttransition: opacity ", "s;\n\t\t\t\topacity: ", ";\n\t\t\t\tdisplay: ", ";\n\t\t\t"], ["\n\t\t\t\tposition: fixed;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100vw;\n\t\t\t\theight: 100vh;\n\t\t\t\tzindex: 9999;\n\t\t\t\tbackground: #fff;\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: center;\n\t\t\t\talign-items: center;\n\t\t\t\ttransition: opacity ", "s;\n\t\t\t\topacity: ", ";\n\t\t\t\tdisplay: ", ";\n\t\t\t"])), DURATION_HIDE_ANIMATION / 1000, (isHidding || isHidden) && '0', isHidden && 'none') },
        jsx("div", { css: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\t\t\t\ttext-align: center;\n\t\t\t\t"], ["\n\t\t\t\t\ttext-align: center;\n\t\t\t\t"]))) },
            jsx("img", { css: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t\t\t\t\t\t@keyframes blur {\n\t\t\t\t\t\t\t0%: {\n\t\t\t\t\t\t\t\topacity: 0.8;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t50%: {\n\t\t\t\t\t\t\t\topacity: 0.3;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t100%: {\n\t\t\t\t\t\t\t\topacity: 0.8;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\tanimation: blur 2s infinite ease-in;\n\t\t\t\t\t\twidth: 128px;\n\t\t\t\t\t\tmargin: 13px 15px;\n\t\t\t\t\t"], ["\n\t\t\t\t\t\t@keyframes blur {\n\t\t\t\t\t\t\t0%: {\n\t\t\t\t\t\t\t\topacity: 0.8;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t50%: {\n\t\t\t\t\t\t\t\topacity: 0.3;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t100%: {\n\t\t\t\t\t\t\t\topacity: 0.8;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\tanimation: blur 2s infinite ease-in;\n\t\t\t\t\t\twidth: 128px;\n\t\t\t\t\t\tmargin: 13px 15px;\n\t\t\t\t\t"]))), src: logo, alt: "Dash4 Logo" }))));
};
var templateObject_1, templateObject_2, templateObject_3;
//# sourceMappingURL=index.js.map