"use strict";
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 __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
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_1 = __importStar(require("react"));
var getStyleForTopLevelComponent_1 = require("../../core/utils/getStyleForTopLevelComponent");
var DisconnectAccountService_1 = require("../../core/services/DisconnectAccountService");
require("./../styles/disconnectAccount.sass");
require("./../styles/disconnectAccountDefault.sass");
exports.DisconnectAccount = function (_a) {
    var walletService = _a.walletService, onDisconnectProgress = _a.onDisconnectProgress, onAccountDisconnected = _a.onAccountDisconnected, onCancelClick = _a.onCancelClick, className = _a.className;
    var _b = __read(react_1.useState({ username: '', verifyField: '' }), 2), inputs = _b[0], setInputs = _b[1];
    var _c = __read(react_1.useState({ usernameError: false, verifyFieldError: false }), 2), errors = _c[0], setErrors = _c[1];
    function onDisconnectClick() {
        DisconnectAccountService_1.disconnectAccount(walletService, inputs, setErrors, onDisconnectProgress, onAccountDisconnected);
    }
    return (react_1.default.createElement("div", { className: "universal-login-disconnect-account" },
        react_1.default.createElement("div", { className: getStyleForTopLevelComponent_1.getStyleForTopLevelComponent(className) },
            react_1.default.createElement("div", { className: "disconnect-account" },
                react_1.default.createElement("h2", { className: "disconnect-account-title" }, "Are you sure you want to disconnect this device? "),
                react_1.default.createElement("p", { className: "disconnect-account-subtitle" }, "You will lose access to your funds from this device."),
                react_1.default.createElement("div", { className: "disconnect-account-form" },
                    react_1.default.createElement("div", { className: "disconnect-account-input-wrapper" },
                        react_1.default.createElement("label", { htmlFor: "username", className: "disconnect-account-label" }, "Type your ENS name e.g. satoshi.example.eth"),
                        react_1.default.createElement("input", { id: "username", className: DisconnectAccountService_1.getInputClassName(errors.usernameError), type: "text", value: inputs.username, onChange: function (e) {
                                setInputs(__assign(__assign({}, inputs), { username: e.target.value }));
                                setErrors(__assign(__assign({}, errors), { usernameError: false }));
                            }, autoCapitalize: 'off' }),
                        errors.usernameError && react_1.default.createElement("div", { className: "disconnect-account-hint" }, "Wrong username")),
                    react_1.default.createElement("div", { className: "disconnect-account-input-wrapper" },
                        react_1.default.createElement("label", { htmlFor: "verifyField", className: "disconnect-account-label" },
                            "To verify, type ",
                            react_1.default.createElement("span", null,
                                react_1.default.createElement("i", null, "DISCONNECT")),
                            " below:"),
                        react_1.default.createElement("input", { id: "verifyField", className: DisconnectAccountService_1.getInputClassName(errors.verifyFieldError), type: "text", value: inputs.verifyField, onChange: function (e) {
                                setInputs(__assign(__assign({}, inputs), { verifyField: e.target.value }));
                                setErrors(__assign(__assign({}, errors), { verifyFieldError: false }));
                            }, autoCapitalize: 'off' }),
                        errors.verifyFieldError && react_1.default.createElement("div", { className: "disconnect-account-hint" }, "Wrong verify field"))),
                react_1.default.createElement("div", { className: "disconnect-account-buttons" },
                    react_1.default.createElement("button", { onClick: onCancelClick, className: "disconnect-account-cancel" }, "Cancel"),
                    react_1.default.createElement("button", { onClick: onDisconnectClick, className: "disconnect-account-confirm" }, "Disconnect"))))));
};
exports.Hint = function (_a) {
    var color = _a.color, children = _a.children;
    var _b = __read(react_1.useState(true), 2), hintVisibility = _b[0], setHintVisibility = _b[1];
    if (hintVisibility) {
        return (react_1.default.createElement("div", { className: "hint " + color },
            react_1.default.createElement("p", { className: "hint-text" }, children),
            react_1.default.createElement("button", { onClick: function () { return setHintVisibility(false); }, className: "hint-btn" }, "Dismiss")));
    }
    return null;
};
//# sourceMappingURL=DisconnectAccount.js.map