import ActionSheet from 'react-native-actions-sheet';
import React, { useRef, useEffect, useContext, useState, } from 'react';
import { useWindowDimensions, Modal, } from 'react-native';
import { ThemeContext } from 'styled-components';
import NotificationCircle from '../components/notificationCircle';
import { ConfigServiceContext } from '../utils/ConfigProvider';
import { Text, Box, Icon, Button, Flex, VStack, HStack, } from '../themes/components';
import borderRadius from '../themes/foundations/borderRadius';
import DrawerTabHeader from '../components/DrawerTabsHeader';
import { useOrientation } from '../utils/browser-utils';
import { nanoid } from '@reduxjs/toolkit';
const MobileDrawer = ({ isOpen, onClose, options, unReadChatMessages, unSeenPolls, webinarParticipantRequest, webinarUnseenRequest, }) => {
    const actionSheetRef = useRef(null);
    const { meeting, sessionConfig } = useContext(ConfigServiceContext);
    const { colors } = useContext(ThemeContext);
    const windowDimensions = useWindowDimensions();
    const { height, width } = sessionConfig.theme.dimensions || windowDimensions;
    const [index, setIndex] = useState(null);
    useEffect(() => {
        if (isOpen && actionSheetRef) {
            actionSheetRef.current?.setModalVisible();
        }
    }, [isOpen]);
    const onBackButtonClick = () => {
        setIndex(null);
        onClose();
        return true;
    };
    const { orientation } = useOrientation();
    const mobileLandscape = orientation === 'LANDSCAPE';
    if (isOpen && index && options[index].mainComponent) {
        return (<Modal visible onRequestClose={onBackButtonClick}>
				<Flex width={width} height={height} bg="secondary.1000" direction="row" flexWrap="wrap" justify="space-between">
					<DrawerTabHeader heading={options[index].label} onBackButtonClick={onBackButtonClick}/>
					<Box width={width}>{options[index].mainComponent}</Box>
				</Flex>
			</Modal>);
    }
    // If disabled, render it in flex component
    // else render it inside Button
    const horizontalMargin = mobileLandscape ? 24 : 8;
    return (<ActionSheet containerStyle={{
        backgroundColor: colors.secondary[900],
        justifyContent: 'space-between',
    }} overlayColor="#000" ref={actionSheetRef} extraScroll={1} onClose={onClose} gestureEnabled>
			{index === null ? (<VStack px="6" py="10" mx={horizontalMargin} borderRadius={borderRadius.medium} bg="secondary.800" mb={12}>
					{options.map((m, index) => {
        const { label, icon, disabled } = m;
        return (<Button key={nanoid()} onClick={options[index].onClick !== undefined
            ? options[index].onClick
            : () => setIndex(index)} disabled={disabled}>
								<HStack p={12} px={16} borderRadius={borderRadius.small} align="center" justify="space-between">
									<Text fontSize="xs" marginTop="5px" textAlign="center" color={disabled ? 'textPrimary.400' : 'textPrimary.200'}>
										{label}
									</Text>
									<Box fontSize="xl">
										{unReadChatMessages && unReadChatMessages.length > 0 && label === 'Chat'
            && (<Box position="absolute" top={-8} zIndex={25} left={-4}>
												<NotificationCircle number={unReadChatMessages.length}/>
											</Box>)}
										{unSeenPolls && unSeenPolls.length > 0 && label === 'Polls'
            && (<Box position="absolute" top={-8} zIndex={25} left={-4}>
												<NotificationCircle number={unSeenPolls.length}/>
											</Box>)}
										{label === 'Participants' && webinarUnseenRequest && webinarUnseenRequest.length > 0
            && (<Box position="absolute" top={-8} zIndex={25} left={-4}>
												<NotificationCircle number={webinarUnseenRequest.length}/>
											</Box>)}
										{typeof icon === 'string' ? (<Icon name={icon} boxSize="26" fill={disabled ? 'textPrimary.400' : 'textPrimary.200'}/>) : icon}
									</Box>
								</HStack>
							</Button>);
    })}
				</VStack>) : (<Flex px="6" py="10" mx={4} borderRadius={borderRadius.medium} bg="secondary.900" mb={12} mt={16}>
					{options[index].drawerComponent}
				</Flex>)}
			{(index !== null || !mobileLandscape)
        && (<Flex mx={horizontalMargin} mb={8}>
						<Button onClick={index !== null ? () => setIndex(null) : () => onClose()} width={width}>
							<HStack p={16} borderRadius={borderRadius.small} justify="center" bg="secondary.800">
								<Text ml={-4} color="danger.500">
									Back
									{index === null && ' to Meeting'}
								</Text>
							</HStack>
						</Button>
					</Flex>)}
		</ActionSheet>);
};
export default MobileDrawer;
//# sourceMappingURL=MobileDrawer.js.map