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