"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_native_actions_sheet_1 = __importDefault(require("react-native-actions-sheet"));
const react_1 = __importStar(require("react"));
const react_native_1 = require("react-native");
const browser_utils_1 = require("../utils/browser-utils");
const styled_components_1 = require("styled-components");
const notificationCircle_1 = __importDefault(require("./notificationCircle"));
const ConfigProvider_1 = require("../utils/ConfigProvider");
const components_1 = require("../themes/components");
const borderRadius_1 = __importDefault(require("../themes/foundations/borderRadius"));
const DrawerTabsHeader_1 = __importDefault(require("./DrawerTabsHeader"));
const OrientationContext_1 = require("../services/OrientationContext");
const toolkit_1 = require("@reduxjs/toolkit");
const DrawerService_1 = require("../services/DrawerService");
const { DyteStaticSafeAreaInsets } = react_native_1.NativeModules;
const getTopMargin = (setupConfig) => {
    var _a;
    if (react_native_1.Platform.OS === 'ios') {
        if ((_a = setupConfig.iosSafeAreaInsetConfig) === null || _a === void 0 ? void 0 : _a.includes('top')) {
            return DyteStaticSafeAreaInsets.safeAreaInsetsTop;
        }
    }
    return 0;
};
const MobileDrawer = ({ options, unReadChatMessages, unSeenPolls, webinarUnseenRequest, }) => {
    const actionSheetRef = react_1.useRef(null);
    const { meeting, sessionConfig } = react_1.useContext(ConfigProvider_1.ConfigServiceContext);
    const { colors } = react_1.useContext(styled_components_1.ThemeContext);
    const windowDimensions = browser_utils_1.useWindowDimensions();
    const { height, width } = browser_utils_1.useScale(sessionConfig.theme.dimensions || windowDimensions);
    const { drawerExpanded, setDrawerExpander, openedTab, setopenedTab } = react_1.default.useContext(DrawerService_1.DrawerContext);
    const onClose = () => {
        setopenedTab(null);
        setDrawerExpander(false);
    };
    react_1.useEffect(() => {
        var _a;
        if (drawerExpanded && actionSheetRef) {
            (_a = actionSheetRef.current) === null || _a === void 0 ? void 0 : _a.setModalVisible();
        }
    }, [drawerExpanded]);
    const onBackButtonClick = () => {
        setopenedTab(null);
        setDrawerExpander(false);
        return true;
    };
    const { orientation } = react_1.default.useContext(OrientationContext_1.OrientationContext);
    const mobileLandscape = orientation === 'LANDSCAPE';
    const tabIndex = options.findIndex((el) => el.id === openedTab);
    const openedTabIndex = tabIndex > -1 ? tabIndex : null;
    if (drawerExpanded &&
        openedTabIndex &&
        options[openedTabIndex].mainComponent) {
        return (react_1.default.createElement(react_native_1.Modal, { visible: true, onRequestClose: onBackButtonClick },
            react_1.default.createElement(components_1.Flex, { width: width, marginTop: getTopMargin(meeting.setupConfig), height: height, bg: "secondary.1000", direction: "row", flexWrap: "wrap", justify: "space-between" },
                react_1.default.createElement(DrawerTabsHeader_1.default, { heading: options[openedTabIndex].label, onBackButtonClick: onBackButtonClick }),
                react_1.default.createElement(components_1.Box, { width: width }, options[openedTabIndex].mainComponent))));
    }
    // If disabled, render it in flex component
    // else render it inside Button
    const horizontalMargin = mobileLandscape ? 24 : 8;
    return (react_1.default.createElement(react_native_actions_sheet_1.default, { containerStyle: {
            backgroundColor: colors.secondary[900],
            justifyContent: 'space-between',
        }, overlayColor: "#000", ref: actionSheetRef, onClose: onClose, gestureEnabled: true },
        openedTabIndex === null ? (react_1.default.createElement(components_1.VStack, { px: "6", py: "10", mx: horizontalMargin, borderRadius: borderRadius_1.default.medium, bg: "secondary.800", mb: 12 }, options.map((m, index) => {
            const { label, icon, disabled, id } = m;
            return (react_1.default.createElement(components_1.Button, { key: toolkit_1.nanoid(), onClick: options[index].onClick !== undefined
                    ? options[index].onClick
                    : () => setopenedTab(id), disabled: disabled },
                react_1.default.createElement(components_1.HStack, { p: 12, px: 16, borderRadius: borderRadius_1.default.small, align: "center", justify: "space-between" },
                    react_1.default.createElement(components_1.Text, { fontSize: "xs", marginTop: "5px", textAlign: "center", color: disabled
                            ? 'textPrimary.400'
                            : 'textPrimary.200' }, label),
                    react_1.default.createElement(components_1.Box, { fontSize: "xl" },
                        unReadChatMessages &&
                            unReadChatMessages.length > 0 &&
                            label === 'Chat' && (react_1.default.createElement(components_1.Box, { position: "absolute", top: -8, zIndex: 25, left: -4 },
                            react_1.default.createElement(notificationCircle_1.default, { number: unReadChatMessages.length }))),
                        unSeenPolls &&
                            unSeenPolls.length > 0 &&
                            label === 'Polls' && (react_1.default.createElement(components_1.Box, { position: "absolute", top: -8, zIndex: 25, left: -4 },
                            react_1.default.createElement(notificationCircle_1.default, { number: unSeenPolls.length }))),
                        label === 'Participants' &&
                            webinarUnseenRequest &&
                            webinarUnseenRequest.length > 0 && (react_1.default.createElement(components_1.Box, { position: "absolute", top: -8, zIndex: 25, left: -4 },
                            react_1.default.createElement(notificationCircle_1.default, { number: webinarUnseenRequest.length }))),
                        typeof icon === 'string' ? (react_1.default.createElement(components_1.Icon, { name: icon, boxSize: "26", fill: disabled
                                ? 'textPrimary.400'
                                : 'textPrimary.200' })) : (icon)))));
        }))) : (react_1.default.createElement(components_1.Flex, { px: "6", py: "10", mx: 4, borderRadius: borderRadius_1.default.medium, bg: "secondary.900", mb: 12, mt: 16 }, options[openedTabIndex].drawerComponent)),
        (openedTabIndex !== null || !mobileLandscape) && (react_1.default.createElement(components_1.Flex, { mx: horizontalMargin, mb: 8 },
            react_1.default.createElement(components_1.Button, { onClick: openedTabIndex !== null
                    ? () => setopenedTab(null)
                    : () => onClose(), width: width },
                react_1.default.createElement(components_1.HStack, { p: 16, borderRadius: borderRadius_1.default.small, justify: "center", bg: "secondary.800" },
                    react_1.default.createElement(components_1.Text, { ml: -4, color: "danger.500" },
                        "Back",
                        openedTabIndex === null && ' to Meeting')))))));
};
exports.default = MobileDrawer;
//# sourceMappingURL=MobileDrawer.js.map