"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const React = __importStar(require("react"));
const components_1 = require("../../themes/components");
const SelfPreview_1 = __importDefault(require("../../components/SelfPreview"));
const react_native_1 = require("react-native");
const styled_components_1 = require("styled-components");
const env_1 = require("../../env");
const borderRadius_1 = __importDefault(require("../../themes/foundations/borderRadius"));
const participantSlice_1 = require("../../store/participantSlice");
const react_redux_1 = require("react-redux");
const config_1 = require("../../utils/config");
const buffer_1 = require("buffer");
function ShowSetupScreen({ width, height, isLandscape, meetingCode, roomName, onChangeMeetingCode, joinMeeting, title, }) {
    const dispatch = react_redux_1.useDispatch();
    const [inputError, setInputError] = React.useState({
        displayName: false,
        meetingCode: false,
    });
    const authToken = react_redux_1.useSelector((state) => state.participant.authToken);
    const decodeBase64 = (data) => buffer_1.Buffer.from(data, 'base64').toString('ascii');
    const { colors } = React.useContext(styled_components_1.ThemeContext);
    const displayName = react_redux_1.useSelector((state) => state.participant.displayName);
    const roomViewType = react_redux_1.useSelector((state) => state.room.roomViewType);
    const onJoinMeetingClicked = () => {
        const inputFieldsErrors = {
            displayName: false,
            meetingCode: false,
        };
        const { meetingId } = JSON.parse(decodeBase64(authToken.split('.')[1]));
        if (!config_1.isV2AuthToken(authToken)) {
            onChangeMeetingCode(meetingCode);
            if (!meetingCode || !displayName) {
                if (!displayName) {
                    inputFieldsErrors.displayName = true;
                }
                if (!meetingCode) {
                    inputFieldsErrors.meetingCode = true;
                }
            }
            else
                joinMeeting();
        }
        else if (config_1.isV2AuthToken(authToken)) {
            onChangeMeetingCode(meetingId);
            if (!displayName) {
                inputFieldsErrors.displayName = true;
            }
            else
                joinMeeting();
        }
        setInputError(inputFieldsErrors);
    };
    return (React.createElement(components_1.Flex, { height: height, width: width, justify: isLandscape ? 'space-evenly' : 'center', align: "center", backgroundColor: "secondary.1000", top: 0, direction: isLandscape ? 'row' : 'column', bottom: 0 },
        React.createElement(components_1.Flex, { align: "center" },
            React.createElement(components_1.Text, { fontWeight: "bold", py: 18, fontSize: "lg" }, title),
            React.createElement(SelfPreview_1.default, null)),
        React.createElement(components_1.Flex, { width: width / (isLandscape ? 3 : 1) - 40, justify: "center" },
            env_1.DYTE_DEV_MODE ? (React.createElement(components_1.Box, null,
                React.createElement(components_1.Text, { color: "textPrimary.300", mt: 20 },
                    "Name:",
                    ' '),
                React.createElement(react_native_1.TextInput, { style: {
                        paddingLeft: 15,
                        height: 48,
                        marginVertical: 10,
                        borderRadius: borderRadius_1.default.medium,
                        color: colors.textPrimary[300],
                        backgroundColor: colors.secondary[800],
                        width: width / (isLandscape ? 3 : 1) - 40,
                    }, onChangeText: (e) => dispatch(participantSlice_1.setUserDisplayName(e)), editable: true, showSoftInputOnFocus: true, value: displayName }))) : (React.createElement(components_1.HStack, { justify: "center", py: 24 },
                React.createElement(components_1.Text, null, "you are joining as "),
                React.createElement(components_1.Text, { fontWeight: "bold" }, displayName))),
            inputError.displayName && (React.createElement(components_1.Text, { color: "danger.300", mb: 10 },
                ' ',
                "Please enter your display name")),
            !config_1.isV2AuthToken(authToken) && !roomName && env_1.DYTE_DEV_MODE && (React.createElement(components_1.Box, null,
                React.createElement(components_1.Text, { color: "textPrimary.300" }, "Meeting Code:"),
                React.createElement(react_native_1.TextInput, { style: {
                        paddingLeft: 15,
                        paddingBottom: 7,
                        paddingTop: 7,
                        marginVertical: 10,
                        borderRadius: borderRadius_1.default.medium,
                        color: colors.textPrimary[300],
                        backgroundColor: colors.secondary[800],
                        width: width / (isLandscape ? 3 : 1) - 40,
                    }, onChangeText: onChangeMeetingCode, value: meetingCode }),
                inputError.meetingCode && (React.createElement(components_1.Text, { color: "danger.300", mb: 10 },
                    ' ',
                    "Please enter meeting room code")))),
            React.createElement(components_1.Button, { onClick: onJoinMeetingClicked },
                React.createElement(components_1.Box, { bg: "primary.500", py: 12, mt: 10, borderRadius: borderRadius_1.default.medium, align: "center" },
                    React.createElement(components_1.Text, null, "Join"))))));
}
exports.default = ShowSetupScreen;
//# sourceMappingURL=showSetupScreen.js.map