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 __());
    };
})();
import { withStyles } from '@signatu/styles';
import React from 'react';
import { ConsentButtons } from '../components/consentButtons';
import { signatuButton } from '../styles/button';
var styles = function (theme) { return ({
    root: {
        display: "none",
        position: "fixed",
        bottom: 0,
        left: 0,
        width: "100%",
        opacity: 0,
        zIndex: 9999
    },
    show: {
        display: "flex",
        opacity: 0.9,
        transition: 'opacity 2s ease-in'
    },
    banner: {
        transition: 'all 1s',
        display: "flex",
        flex: 1,
        flexDirection: "row",
        padding: theme.spacing.unit * 4,
        backgroundColor: theme.palette.primary.main,
        color: theme.palette.primary.contrastText,
        '& a': {
            color: theme.palette.primary.contrastText
        },
        boxSizing: 'border-box'
    },
    content: {
        flex: 1
    },
    fill: {
        margin: theme.spacing.unit * 4
    },
    buttonContainer: {
        maxWidth: "320px"
    },
    button: signatuButton(theme)
}); };
var CookieBanner = /** @class */ (function (_super) {
    __extends(CookieBanner, _super);
    function CookieBanner(props) {
        var _this = _super.call(this, props) || this;
        _this.state = { loaded: false, accepted: false };
        return _this;
    }
    CookieBanner.prototype.update = function (consent) {
        var _this = this;
        /** One second delay on action */
        var timeout = consent ? 1000 : 0;
        setTimeout(function () { return _this.setState({ loaded: true, consent: consent, accepted: consent ? !!consent.action : false }); }, timeout);
    };
    CookieBanner.prototype.render = function () {
        var _this = this;
        var _a = this.props, classes = _a.classes, subject = _a.subject, issuer = _a.issuer, config = _a.config, scope = _a.scope, delegate = _a.delegate, children = _a.children;
        var _b = this.state, loaded = _b.loaded, consent = _b.consent;
        /** If we have loaded and no action from the user => show dialog. Otherwise hide it */
        return (React.createElement("div", { "data-type": "CookieBanner", className: classes.root + " " + (loaded && !consent ? classes.show : "") },
            React.createElement("div", { className: classes.banner },
                React.createElement("div", { className: classes.content }, children),
                React.createElement("div", { className: classes.fill }),
                React.createElement("div", { className: classes.buttonContainer },
                    React.createElement(ConsentButtons, { config: config, subject: subject, issuer: issuer, scope: scope, delegate: delegate, 
                        /** Overrides */
                        target: "signatu.com/demo/checkboxandbuttons", language: this.props.language, onLoaded: function (c) { return _this.update(c); }, onAction: function (c) { return _this.update(c); } })))));
    };
    return CookieBanner;
}(React.Component));
var styled = withStyles(styles)(CookieBanner);
export { styled as CookieBanner };
//# sourceMappingURL=cookieBanner.js.map