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 } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { base64toFile, SwButton } from 'sw-web-shared';
import { useHistory } from 'react-router-dom';
import { Box, Button, Typography } from '@mui/material';
import { useForm } from 'react-hook-form';
import { currentCommunity } from '../store/sw-auth.reducer';
import { resetUIState } from '../store/store';
import { loadingFinished, setLoadingMessage, startLoading } from '../store/sw-ui-reducer';
import { currentUserState, setCommitment, setRole } from '../store/sw-user-data.reducer';
import { isCoreTeamMember, joinCommunity } from '../services/web3/web3Service';
import { CustomSlider } from '../components/CustomSlider';
import ErrorBox from '../components/ErrorBox';
import { ErrorTypes } from '../types/error-types';
import BackButton from '../components/BackButton';
import { uploadFile } from '../services/textile/textile.hub';
// const defaultValues = {
//   commitment: 0,
// };
var UserRole = function (props) {
    var history = useHistory();
    var dispatch = useDispatch();
    var community = useSelector(currentCommunity);
    // const userState = useSelector(currentUserState);
    var swUserState = useSelector(currentUserState);
    var _a = useState([]), memberRoles = _a[0], setMemberRoles = _a[1];
    var _b = useState(undefined), selectedRole = _b[0], setSelectedRole = _b[1];
    var _c = useState(undefined), errorData = _c[0], setErrorData = _c[1];
    console.log(swUserState);
    var _d = useForm({
        mode: 'onChange',
        defaultValues: swUserState,
    }), handleSubmit = _d.handleSubmit, control = _d.control, setValue = _d.setValue, isValid = _d.formState.isValid;
    var onSubmit = function (data) { return __awaiter(void 0, void 0, void 0, function () {
        var _a;
        return __generator(this, function (_b) {
            switch (_b.label) {
                case 0:
                    dispatch(startLoading('Uploading user image.'));
                    _a = uploadFile;
                    return [4 /*yield*/, base64toFile(swUserState.profileImageUrl, 'avatar')];
                case 1: return [4 /*yield*/, _a.apply(void 0, [_b.sent()])
                        .then(function (result) { return __awaiter(void 0, void 0, void 0, function () {
                        return __generator(this, function (_a) {
                            switch (_a.label) {
                                case 0:
                                    dispatch(setLoadingMessage('Joining community.'));
                                    return [4 /*yield*/, joinCommunity(community.address, swUserState.username, result, selectedRole, data.commitment, dispatch)
                                            .then(function () {
                                            history.push('/qr');
                                            dispatch(loadingFinished());
                                        })
                                            .catch(function (e) {
                                            if (e.message === ErrorTypes.CommunitySlotsFull ||
                                                e.message === ErrorTypes.AlreadyAMember ||
                                                e.message === ErrorTypes.SkillWalletWithThisAddressAlreadyRegistered) {
                                                setErrorData({
                                                    errorMessage: e.message,
                                                    actionLabel: 'Back to Home',
                                                    action: function () {
                                                        dispatch(resetUIState);
                                                        history.push('/');
                                                    },
                                                });
                                            }
                                            else {
                                                console.log(e);
                                                setErrorData({
                                                    errorMessage: e.message,
                                                    actionLabel: 'Retry',
                                                    action: function () {
                                                        setErrorData(undefined);
                                                        handleSubmit(onSubmit)();
                                                    },
                                                });
                                            }
                                            dispatch(loadingFinished());
                                        })];
                                case 1:
                                    _a.sent();
                                    return [2 /*return*/];
                            }
                        });
                    }); })
                        .catch(function (e) {
                        console.log(e);
                        setErrorData({
                            errorMessage: e.message,
                            actionLabel: 'Retry',
                            action: function () {
                                setErrorData(undefined);
                                handleSubmit(onSubmit)();
                            },
                        });
                        dispatch(loadingFinished());
                    })];
                case 2:
                    _b.sent();
                    return [2 /*return*/];
            }
        });
    }); };
    useEffect(function () {
        var fetchData = function () { return __awaiter(void 0, void 0, void 0, function () {
            return __generator(this, function (_a) {
                switch (_a.label) {
                    case 0:
                        dispatch(startLoading('Checking membership.'));
                        return [4 /*yield*/, isCoreTeamMember(community.address, window.ethereum.selectedAddress)
                                .then(function (result) {
                                var _a;
                                var roles = ((_a = community === null || community === void 0 ? void 0 : community.roles) === null || _a === void 0 ? void 0 : _a.roles) || [];
                                var newUserRolesBaseId = 4;
                                var filteredRoles = roles
                                    .filter(function (r) { return r.isCoreTeamMember === result; })
                                    .map(function (curr, index) {
                                    var roleName = curr.roleName;
                                    var roleId;
                                    if (roleId <= 3) {
                                        roleId = curr.roleId;
                                    }
                                    else {
                                        roleId = newUserRolesBaseId + index;
                                    }
                                    return { roleId: roleId, roleName: roleName };
                                });
                                setMemberRoles(filteredRoles);
                                dispatch(loadingFinished());
                            })
                                .catch(function (e) {
                                console.log(e);
                                if (e.message === 'Already processing eth_requestAccounts. Please wait.') {
                                    e.message = ErrorTypes.GetAccountsInProgress;
                                }
                                setErrorData({
                                    errorMessage: e.message,
                                    actionLabel: 'Retry',
                                    action: function () {
                                        setErrorData(undefined);
                                        fetchData();
                                    },
                                });
                                dispatch(loadingFinished());
                            })];
                    case 1:
                        _a.sent();
                        return [2 /*return*/];
                }
            });
        }); };
        fetchData();
    }, []);
    var handleRoleSelected = function (role) {
        dispatch(setRole(role.roleName));
        setSelectedRole(role);
    };
    var handleSliderChange = function (value) {
        console.log(value);
        dispatch(setCommitment(value));
    };
    var handleBackClick = function () { return __awaiter(void 0, void 0, void 0, function () {
        return __generator(this, function (_a) {
            if (selectedRole) {
                setSelectedRole(undefined);
            }
            else {
                history.goBack();
            }
            return [2 /*return*/];
        });
    }); };
    return errorData ? (_jsx(ErrorBox, { errorData: errorData }, void 0)) : (_jsx(Box, __assign({ sx: {
            width: '100%',
        } }, { children: _jsxs("form", __assign({ onSubmit: handleSubmit(onSubmit) }, { children: [_jsxs(Box, __assign({ sx: {
                        width: '100%',
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignContent: 'center',
                        my: '17px',
                    } }, { children: [_jsx(BackButton, { handleClick: handleBackClick }, void 0), _jsxs(Box, __assign({ sx: {
                                flexGrow: 1,
                                display: 'flex',
                                flexDirection: 'column',
                                justifyContent: 'center',
                                alignItems: 'center',
                            } }, { children: [_jsxs(Typography, __assign({ align: "center", variant: "h2", sx: { fontWeight: '400', maxWidth: '320px', mb: '15px' } }, { children: ["Your Role in", ' ', _jsx(Typography, __assign({ variant: "h2", component: "span", sx: { fontWeight: '600', textDecorationLine: 'underline' } }, { children: community.name }), void 0), "!"] }), void 0), _jsx(Typography, __assign({ align: "center", variant: "h3", sx: { fontWeight: '400', maxWidth: '320px' } }, { children: "Pick what you're best at, & be rewareded for it!" }), 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',
                        mb: '9px',
                    } }, { children: [_jsx(Box, __assign({ sx: {
                                py: '24px',
                                mb: '27px',
                                display: 'flex',
                                flexDirection: 'column',
                                alignItems: 'center',
                                justifyContent: 'center',
                                gridGap: '20px',
                                minWidth: '380px',
                                maxHeight: '172px',
                                border: 2,
                                borderColor: 'secondary',
                                backgroundColor: '#FFFFFF',
                            } }, { children: selectedRole ? (_jsxs(Box, __assign({ sx: {
                                    display: 'flex',
                                    flexDirection: 'column',
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    maxWidth: '212px',
                                    border: 2,
                                    borderColor: '#000000',
                                    backgroundColor: '#FFFFFF',
                                    pb: '10px',
                                } }, { children: [_jsx(Box, __assign({ sx: {
                                            display: 'flex',
                                            alignItems: 'center',
                                            justifyContent: 'center',
                                            minHeight: '44px',
                                            width: '100%',
                                            color: 'secondary',
                                            backgroundColor: '#000000',
                                        } }, { children: _jsx(Typography, __assign({ align: "center", sx: {
                                                alignContent: 'center',
                                                color: 'secondary',
                                                fontWeight: '400',
                                            }, variant: "h1" }, { children: selectedRole.roleName }), void 0) }), void 0), _jsxs(Typography, __assign({ align: "center", variant: "h4", sx: { color: '#000000', fontWeight: '400', maxWidth: '320px', my: '12px' } }, { children: ["Your", ' ', _jsx(Typography, __assign({ variant: "h4", component: "span", sx: { color: '#000000', fontWeight: '600', textDecorationLine: 'underline' } }, { children: "Commitment Level" }), void 0)] }), void 0), _jsx(Typography, __assign({ align: "center", variant: "h5", sx: { color: '#000000', fontWeight: '400', maxWidth: '320px', mb: '12px' } }, { children: "Tell your community how much time you commit to this Role!" }), void 0), _jsx(CustomSlider, { name: "commitment", control: control, onValueChange: handleSliderChange, setValue: setValue, rules: { min: 1, max: 10 }, defaultValue: swUserState.commitment }, void 0)] }), void 0)) : (memberRoles &&
                                memberRoles.map(function (role, index) {
                                    return (_jsx(SwButton, __assign({ sx: {
                                            maxWidth: '212px',
                                            maxHeight: '44px',
                                        }, className: selectedRole && selectedRole.roleId === role.roleId ? 'active-link' : '', mode: "dark", btnType: "large", onClick: function () { return handleRoleSelected(role); } }, { children: _jsx(Typography, __assign({ variant: "h3" }, { children: role.roleName }), void 0) }), index));
                                })) }), void 0), _jsx(SwButton, { sx: {
                                borderColor: 'primary.main',
                            }, btnType: "large", mode: "dark", component: Button, type: "submit", disabled: !isValid || !selectedRole, label: "That's it - join this community!" }, void 0)] }), void 0)] }), void 0) }), void 0));
};
export default UserRole;
