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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (_) try {
            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [op[0] & 2, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from 'react';
import { useDispatch } from 'react-redux';
import { SwButton } from 'sw-web-shared';
import { Link, useHistory } from 'react-router-dom';
import { Box, Typography } from '@mui/material';
import { resetUIState } from '../store/store';
import { showDialog, setLoading, loadingFinished } from '../store/sw-ui-reducer';
import { setUserData } from '../store/sw-user-data.reducer';
import { fetchSkillWallet } from '../services/web3/web3Service';
import { ReactComponent as MetaMaskIcon } from '../assets/metamask.svg';
import { ReactComponent as PortisIcon } from '../assets/portis_icon.svg';
import ErrorBox from '../components/ErrorBox';
import { ErrorTypes } from '../types/error-types';
import BackButton from '../components/BackButton';
import { dispatchSwEvent } from '../utils/utils';
import { OutputEventTypes } from '../types/event-types';
var LoginWithSkillWallet = function (props) {
    var dispatch = useDispatch();
    var history = useHistory();
    var _a = useState(undefined), errorData = _a[0], setErrorData = _a[1];
    var performMetamaskLogin = function () { return __awaiter(void 0, void 0, void 0, function () {
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    dispatch(setLoading(true));
                    return [4 /*yield*/, fetchSkillWallet(dispatch)
                            .then(function (result) {
                            dispatch(showDialog(false));
                            dispatch(setUserData({
                                username: result.nickname,
                                profileImageUrl: result.imageUrl,
                                isLoggedIn: true,
                            }));
                            window.sessionStorage.setItem('skillWallet', JSON.stringify(result));
                            dispatchSwEvent(OutputEventTypes.Login, true);
                            dispatch(loadingFinished());
                        })
                            .catch(function (e) {
                            if (e.message === ErrorTypes.SkillWalletExistsButInactive) {
                                dispatch(loadingFinished());
                                history.push('/qr');
                            }
                            else if (e.message === ErrorTypes.SkillWalletNotFound) {
                                setErrorData({
                                    errorMessage: 'SkillWallet not found.',
                                    actionLabel: 'Go Back',
                                    action: function () {
                                        dispatch(resetUIState);
                                        history.push('/');
                                    },
                                });
                                dispatch(loadingFinished());
                            }
                            else {
                                if (e.message === 'Already processing eth_requestAccounts. Please wait.') {
                                    e.message = ErrorTypes.GetAccountsInProgress;
                                }
                                setErrorData({
                                    errorMessage: e.message,
                                    actionLabel: 'Retry',
                                    action: function () {
                                        setErrorData(undefined);
                                        performMetamaskLogin();
                                    },
                                });
                                dispatch(loadingFinished());
                            }
                        })];
                case 1:
                    _a.sent();
                    return [2 /*return*/];
            }
        });
    }); };
    var handleMetamaskClick = function () { return __awaiter(void 0, void 0, void 0, function () {
        return __generator(this, function (_a) {
            performMetamaskLogin();
            return [2 /*return*/];
        });
    }); };
    var handleBackClick = function () { return __awaiter(void 0, void 0, void 0, function () {
        return __generator(this, function (_a) {
            history.goBack();
            return [2 /*return*/];
        });
    }); };
    return (_jsx(Box, __assign({ sx: {
            width: '100%',
            minHeight: '460px',
            display: 'flex',
            justifyContent: 'space-around',
            flexDirection: 'column',
            alignItems: 'center',
        } }, { children: errorData ? (_jsx(ErrorBox, { errorData: errorData }, void 0)) : (_jsxs(_Fragment, { children: [_jsxs(Box, __assign({ sx: {
                        display: 'flex',
                        width: '100%',
                        mx: '2px',
                    } }, { children: [_jsx(BackButton, { handleClick: handleBackClick }, void 0), _jsx(Box, __assign({ sx: {
                                flexGrow: 1,
                                display: 'flex',
                                justifyContent: 'center',
                                gap: '30px',
                            } }, { children: _jsx(Typography, __assign({ align: "center", variant: "h1", sx: { my: 'auto', fontWeight: '400' } }, { children: "Welcome back! \uD83D\uDE4C" }), void 0) }), void 0), _jsx(Box, { sx: {
                                width: '45px',
                                height: '45px',
                            } }, void 0)] }), void 0), _jsxs(Box, __assign({ sx: {
                        width: '100%',
                        display: 'flex',
                        justifyContent: 'center',
                        flexDirection: 'column',
                        alignItems: 'center',
                        gap: '30px',
                    } }, { children: [_jsx(SwButton, { sx: {
                                borderColor: 'primary.main',
                            }, btnType: "large", startIcon: _jsx(MetaMaskIcon, {}, void 0), mode: "dark", onClick: handleMetamaskClick, label: "Login with Metamask" }, void 0), _jsx(SwButton, { sx: {
                                borderColor: 'primary.main',
                            }, disabled: true, btnType: "large", startIcon: _jsx(PortisIcon, {}, void 0), mode: "dark", component: Link, to: "/", label: "User your Password" }, void 0), _jsx(SwButton, { sx: {
                                borderColor: 'primary.main',
                            }, btnType: "large", disabled: true, mode: "dark", component: Link, to: "/qr", label: "Scan QR Code" }, void 0)] }), void 0)] }, void 0)) }), void 0));
};
export default LoginWithSkillWallet;
