"use strict";
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 __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var ReactDOM = __importStar(require("react-dom"));
var Button_1 = require("../Button");
var QuestionToolTip_1 = require("../QuestionToolTip");
var styledComponents_1 = require("./styledComponents");
var textComponents_1 = require("./textComponents");
var NavDrawerComponent = /** @class */ (function (_super) {
    __extends(NavDrawerComponent, _super);
    function NavDrawerComponent() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.copyToClipBoard = function () {
            var textArea = document.createElement("textarea");
            var userEthAddress = _this.props.userEthAddress || "";
            textArea.innerText = userEthAddress.replace(/ /g, "");
            document.body.appendChild(textArea);
            textArea.select();
            document.execCommand("copy");
            textArea.remove();
        };
        return _this;
    }
    NavDrawerComponent.prototype.render = function () {
        var _this = this;
        var _a = this.props, userEthAddress = _a.userEthAddress, onLogoutPressed = _a.onLogoutPressed, onViewDashboardPressed = _a.onViewDashboardPressed, balance = _a.balance, votingBalance = _a.votingBalance, buyCvlUrl = _a.buyCvlUrl, userRevealVotesCount = _a.userRevealVotesCount, userClaimRewardsCount = _a.userClaimRewardsCount, userChallengesStartedCount = _a.userChallengesStartedCount, userChallengesVotedOnCount = _a.userChallengesVotedOnCount;
        if (!userEthAddress) {
            return React.createElement(React.Fragment, null);
        }
        var buyCvlBtnProps = { href: buyCvlUrl };
        if (buyCvlUrl.charAt(0) === "/") {
            buyCvlBtnProps = { to: buyCvlUrl };
        }
        return (React.createElement(styledComponents_1.StyledNavDrawer, null,
            React.createElement(styledComponents_1.NavDrawerSection, null,
                React.createElement(styledComponents_1.NavDrawerSectionHeader, null,
                    React.createElement(textComponents_1.NavDrawerUserAddessText, null)),
                React.createElement(styledComponents_1.UserAddress, null, userEthAddress),
                React.createElement(styledComponents_1.CopyButton, { size: Button_1.buttonSizes.SMALL, onClick: function (ev) { return _this.copyToClipBoard(); } },
                    React.createElement(textComponents_1.NavDrawerCopyBtnText, null))),
            React.createElement(styledComponents_1.NavDrawerSection, null,
                React.createElement(Button_1.Button, { size: Button_1.buttonSizes.SMALL, onClick: onViewDashboardPressed }, "View My Dashboard")),
            React.createElement(styledComponents_1.NavDrawerSection, null,
                React.createElement(Button_1.Button, { size: Button_1.buttonSizes.SMALL, onClick: onLogoutPressed }, "Logout")),
            React.createElement(styledComponents_1.NavDrawerSection, null,
                React.createElement(styledComponents_1.NavDrawerSectionHeader, null,
                    React.createElement(textComponents_1.NavDrawerBalanceText, null)),
                React.createElement(styledComponents_1.NavDrawerRow, null,
                    React.createElement(styledComponents_1.NavDrawerRowLabel, null,
                        React.createElement(textComponents_1.NavDrawerTotalBalanceText, null)),
                    React.createElement(styledComponents_1.NavDrawerRowInfo, null,
                        React.createElement(styledComponents_1.NavDrawerCvlBalance, null, balance))),
                React.createElement(styledComponents_1.NavDrawerRow, null,
                    React.createElement(styledComponents_1.NavDrawerRowLabel, null,
                        React.createElement(textComponents_1.NavDrawerVotingBalanceText, null),
                        React.createElement(QuestionToolTip_1.QuestionToolTip, { explainerText: React.createElement(textComponents_1.NavDrawerVotingBalanceToolTipText, null) })),
                    React.createElement(styledComponents_1.NavDrawerRowInfo, null,
                        React.createElement(styledComponents_1.NavDrawerCvlBalance, null, votingBalance))),
                React.createElement(styledComponents_1.NavDrawerBuyCvlBtn, __assign({ size: Button_1.buttonSizes.SMALL }, buyCvlBtnProps),
                    React.createElement(textComponents_1.NavDrawerBuyCvlBtnText, null))),
            React.createElement(styledComponents_1.NavDrawerSection, null,
                React.createElement(styledComponents_1.NavDrawerSectionHeader, null,
                    React.createElement(textComponents_1.NavDrawerDashboardText, null)),
                React.createElement(styledComponents_1.NavDrawerRow, null,
                    React.createElement(styledComponents_1.NavDrawerRowLabel, null,
                        React.createElement(textComponents_1.NavDrawerRevealVotesText, null)),
                    React.createElement(styledComponents_1.NavDrawerPill, null, userRevealVotesCount || 0)),
                React.createElement(styledComponents_1.NavDrawerRow, null,
                    React.createElement(styledComponents_1.NavDrawerRowLabel, null,
                        React.createElement(textComponents_1.NavDrawerClaimRewardsText, null)),
                    React.createElement(styledComponents_1.NavDrawerPill, null, userClaimRewardsCount || 0)),
                React.createElement(styledComponents_1.NavDrawerRow, null,
                    React.createElement(styledComponents_1.NavDrawerRowLabel, null,
                        React.createElement(textComponents_1.NavDrawerSubmittedChallengesText, null)),
                    React.createElement(styledComponents_1.NavDrawerPill, null, userChallengesStartedCount || 0)),
                React.createElement(styledComponents_1.NavDrawerRow, null,
                    React.createElement(styledComponents_1.NavDrawerRowLabel, null,
                        React.createElement(textComponents_1.NavDrawerVotedChallengesText, null)),
                    React.createElement(styledComponents_1.NavDrawerPill, null, userChallengesVotedOnCount || 0)))));
    };
    return NavDrawerComponent;
}(React.Component));
var NavDrawerBucketComponent = /** @class */ (function (_super) {
    __extends(NavDrawerBucketComponent, _super);
    function NavDrawerBucketComponent() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.bucket = document.createElement("div");
        _this.handleClick = function (event) {
            var toggleEl = _this.props.userAccountElRef && _this.props.userAccountElRef.current;
            if (_this.bucket.contains(event.target) ||
                ((toggleEl && toggleEl.contains(event.target)) || event.target === toggleEl)) {
                return;
            }
            _this.props.handleOutsideClick();
        };
        return _this;
    }
    NavDrawerBucketComponent.prototype.componentDidMount = function () {
        document.body.appendChild(this.bucket);
        document.addEventListener("mousedown", this.handleClick, false);
    };
    NavDrawerBucketComponent.prototype.componentWillUnmount = function () {
        document.body.removeChild(this.bucket);
        document.removeEventListener("mousedown", this.handleClick, false);
    };
    NavDrawerBucketComponent.prototype.render = function () {
        return ReactDOM.createPortal(React.createElement(NavDrawerComponent, __assign({}, this.props)), this.bucket);
    };
    return NavDrawerBucketComponent;
}(React.Component));
var NavDrawer = function (props) {
    return React.createElement(NavDrawerBucketComponent, __assign({}, props));
};
exports.default = NavDrawer;
//# sourceMappingURL=NavDrawer.js.map