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;
};
import React, { useState } from 'react';
import { getStyleForTopLevelComponent } from '../../core/utils/getStyleForTopLevelComponent';
import { disconnectAccount, getInputClassName } from '../../core/services/DisconnectAccountService';
import './../styles/disconnectAccount.sass';
import './../styles/disconnectAccountDefault.sass';
export var DisconnectAccount = function (_a) {
    var walletService = _a.walletService, onDisconnectProgress = _a.onDisconnectProgress, onAccountDisconnected = _a.onAccountDisconnected, onCancelClick = _a.onCancelClick, className = _a.className;
    var _b = __read(useState({ username: '', verifyField: '' }), 2), inputs = _b[0], setInputs = _b[1];
    var _c = __read(useState({ usernameError: false, verifyFieldError: false }), 2), errors = _c[0], setErrors = _c[1];
    function onDisconnectClick() {
        disconnectAccount(walletService, inputs, setErrors, onDisconnectProgress, onAccountDisconnected);
    }
    return (React.createElement("div", { className: "universal-login-disconnect-account" },
        React.createElement("div", { className: getStyleForTopLevelComponent(className) },
            React.createElement("div", { className: "disconnect-account" },
                React.createElement("h2", { className: "disconnect-account-title" }, "Are you sure you want to disconnect this device? "),
                React.createElement("p", { className: "disconnect-account-subtitle" }, "You will lose access to your funds from this device."),
                React.createElement("div", { className: "disconnect-account-form" },
                    React.createElement("div", { className: "disconnect-account-input-wrapper" },
                        React.createElement("label", { htmlFor: "username", className: "disconnect-account-label" }, "Type your ENS name e.g. satoshi.example.eth"),
                        React.createElement("input", { id: "username", className: 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.createElement("div", { className: "disconnect-account-hint" }, "Wrong username")),
                    React.createElement("div", { className: "disconnect-account-input-wrapper" },
                        React.createElement("label", { htmlFor: "verifyField", className: "disconnect-account-label" },
                            "To verify, type ",
                            React.createElement("span", null,
                                React.createElement("i", null, "DISCONNECT")),
                            " below:"),
                        React.createElement("input", { id: "verifyField", className: 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.createElement("div", { className: "disconnect-account-hint" }, "Wrong verify field"))),
                React.createElement("div", { className: "disconnect-account-buttons" },
                    React.createElement("button", { onClick: onCancelClick, className: "disconnect-account-cancel" }, "Cancel"),
                    React.createElement("button", { onClick: onDisconnectClick, className: "disconnect-account-confirm" }, "Disconnect"))))));
};
export var Hint = function (_a) {
    var color = _a.color, children = _a.children;
    var _b = __read(useState(true), 2), hintVisibility = _b[0], setHintVisibility = _b[1];
    if (hintVisibility) {
        return (React.createElement("div", { className: "hint " + color },
            React.createElement("p", { className: "hint-text" }, children),
            React.createElement("button", { onClick: function () { return setHintVisibility(false); }, className: "hint-btn" }, "Dismiss")));
    }
    return null;
};
//# sourceMappingURL=DisconnectAccount.js.map