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 { Button } from '@material-ui/core';
import { Consent } from '@signatu/consent';
import React from 'react';
import Highlight from 'react-highlight';
import { ConsentButtons, makeConsentCondPopup } from '..';
import { DemoCard } from './common';
/** Create a higher-order component that wraps TrackerConsent in a popup */
var ConsentButtonsCondPopup = makeConsentCondPopup(ConsentButtons);
var CondTrackerPopupDemo = /** @class */ (function (_super) {
    __extends(CondTrackerPopupDemo, _super);
    function CondTrackerPopupDemo() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.name = "Tracker Consent Popup";
        _this.doc = React.createElement(Highlight, { className: 'hljs' }, "\n\nimport {DataProcessingConsent} from '@signatu/consent-react';\n\nconst config = {\n    apiKey: \"YOUR_API_KEY\", \n    accessToken: \"YOUR_ACCESS_TOKEN\"\n}\n\nrender() {\n    return <TrackerConsentCondPopup\n        config={config}\n        tracker='adform'\n        subject={Consent.anonSubject()}\n        issuer=\"signatu.com\"\n        target=\"signatu.com/trackers\"\n        scope=\"adform\"\n        onLoaded={(consent: ConsentEvent) => this.setState({consent: consent})}\n        onAction={(consent: ConsentEvent) => this.setState({consent: consent})}>\n            <div>\n                We use AdForm to manage our programmatic advertising that keeps this paper free for you. \n            </div>\n    </TrackerConsentCondPopup>\n}\n\n  ");
        _this.state = {
            active: false
        };
        return _this;
    }
    CondTrackerPopupDemo.prototype.render = function () {
        var _this = this;
        var demo = React.createElement("div", null,
            React.createElement("h2", null, "Conditional tracker consent"),
            "This popup will show only when you have not taken action. When you have given your consent or refusal the popup will not appear again. Click ",
            React.createElement("b", null, "Activate"),
            " to activate the conditional.",
            React.createElement("br", null),
            React.createElement("br", null),
            "Note that if you have already taken action (accepted or declined) the popup will not show even when you activate. This is by design. To test again, create a new Subject ID (top of screen) and reload the page.",
            React.createElement("br", null),
            React.createElement("div", { style: { marginTop: "2em", marginBottom: "2em" } },
                React.createElement("div", null,
                    React.createElement("b", null, "Active:"),
                    " ",
                    this.state.active.toString(),
                    "."),
                this.state.active && React.createElement("div", null,
                    React.createElement("b", null, "Status:"),
                    " ",
                    Consent.text(this.state.consent, this.props.language))),
            React.createElement(Button, { variant: "raised", disabled: this.state.active, onClick: function () { return _this.setState({ active: true }); } }, " Activate "),
            this.state.active && React.createElement(ConsentButtonsCondPopup, { id: "buttons_consent", config: this.props.config, subject: Consent.anonUserId(), issuer: "signatu.com", autoClose: true, onLoaded: function (consent) { return _this.setState({ consent: consent }); }, onAction: function (consent) { return _this.setState({ consent: consent }); }, target: "signatu.com/demo/conditional", language: this.props.language },
                "This popup will show only when you have not taken action. When you have given your consent or refusal the popup will not appear again. Click ",
                React.createElement("b", null, "Accept"),
                " or ",
                React.createElement("b", null, "Refuse"),
                ". The popup is configured to close automatically."));
        return React.createElement(DemoCard, { element: demo, doc: this.doc });
    };
    return CondTrackerPopupDemo;
}(React.Component));
export { CondTrackerPopupDemo };
//# sourceMappingURL=condTrackerPopup.js.map