"use strict";
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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importStar(require("react"));
var getStyleForTopLevelComponent_1 = require("../../core/utils/getStyleForTopLevelComponent");
var ScrollProgressDots_1 = __importDefault(require("../commons/ScrollProgressDots"));
var scrollProgress_1 = require("../../app/scrollProgress");
require("./../styles/connection.sass");
require("./../styles/connectionDefault.sass");
exports.ChooseConnectionMethod = function (_a) {
    var onCancel = _a.onCancel, onConnectWithDeviceClick = _a.onConnectWithDeviceClick, onConnectWithPassphraseClick = _a.onConnectWithPassphraseClick, className = _a.className;
    var ref = react_1.useRef(null);
    var _b = __read(react_1.useState(0.0), 2), progress = _b[0], setProgress = _b[1];
    return (react_1.default.createElement("div", { className: "universal-login-connection" },
        react_1.default.createElement("div", { className: getStyleForTopLevelComponent_1.getStyleForTopLevelComponent(className) },
            react_1.default.createElement("div", { className: "connection" },
                react_1.default.createElement("h1", { className: "connection-title" }, "Connect with another device"),
                react_1.default.createElement("div", { className: "connection-content" },
                    react_1.default.createElement("div", { className: "connection-row-wrapper", ref: ref, onScroll: function () { return scrollProgress_1.calculateScrollProgress(ref, setProgress); } },
                        react_1.default.createElement("div", { className: "connection-row" },
                            react_1.default.createElement("div", { className: "connection-method passwordless-method" },
                                react_1.default.createElement("h2", { className: "connection-method-title" }, "Passwordless"),
                                react_1.default.createElement("p", { className: "connection-method-text" }, "Approve the connection with another device that already controls your account."),
                                react_1.default.createElement("button", { id: "emoji", onClick: onConnectWithDeviceClick, className: "connection-method-link" },
                                    react_1.default.createElement("span", null, "Connect with another device"))),
                            react_1.default.createElement("div", { className: "connection-method passphrase-method" },
                                react_1.default.createElement("h2", { className: "connection-method-title" }, "Passphrase"),
                                react_1.default.createElement("p", { className: "connection-method-text" }, "If you have lost all your devices, recover the access to your account."),
                                react_1.default.createElement("button", { id: "recover", onClick: onConnectWithPassphraseClick, className: "connection-method-link" },
                                    react_1.default.createElement("span", null, "Connect with passphrase"))))),
                    react_1.default.createElement(ScrollProgressDots_1.default, { dotOpacities: [1.0 - progress, progress], minimumOpacity: 0.3, maximumOpacity: 0.8 }),
                    react_1.default.createElement("button", { onClick: onCancel, className: "connection-cancel-button" }, "Cancel"))))));
};
//# sourceMappingURL=ChooseConnectionMethod.js.map