import React, { useContext } from 'react';
import { ConfigServiceContext } from '../utils/ConfigProvider';
import { Box, Button, Flex, HStack, Text, VStack, Icon, } from '../themes/components';
import { useWindowDimensions } from 'react-native';
import { ThemeContext } from 'styled-components';
import borderRadius from '../themes/foundations/borderRadius';
export function MakeMenu(props) {
    const { menu } = props;
    const { colors } = useContext(ThemeContext);
    return (<Flex>
			{menu.map(({ title, defaultValue, onChange, options, }, index) => (<React.Fragment key={`MakeMenu${index}`}>
						{index !== 0 && <Box />}
						<Flex>
							<Text fontSize="md" mb={10} fontWeight="bold" color="textPrimary.100">{title}</Text>
							{options.map(({ key, value, children, }, optionsIndex) => (<Button onClick={() => onChange(value)} key={`MakeMenuOptions${optionsIndex}`}>
									<HStack justify="space-between" p={16} mb={4} bg={'secondary.800'} borderRadius={borderRadius.small}>
										<Text fontSize="sm">{children}</Text>
										{defaultValue === value ? <Icon name="check" fill="success.500"/> : null}

									</HStack>
								</Button>))}
						</Flex>
					</React.Fragment>))}
		</Flex>);
}
export function StageControlButton(props) {
    const { variant, label, icon, disabled, onClick, isActive, menu, badge, ariaLabel, } = props;
    const windowDimensions = useWindowDimensions();
    const { sessionConfig } = useContext(ConfigServiceContext);
    const { height, width } = sessionConfig.theme.dimensions || windowDimensions;
    const isLandscape = width > height;
    const isMobile = width < 1024;
    const mobileLandscape = isMobile && isLandscape;
    const transform = `rotate(${mobileLandscape ? 90 : 0}deg)`;
    const position = mobileLandscape ? { position: 'fixed', bottom: '20rem', left: '-12rem' } : {};
    return (<Flex>
			{badge !== '' && (<Box className="dyte-client-notificationBadge" bg="primary.500" textColor="textPrimary.100" height={4} position="absolute" right="2" top="1" fontSize="xs">
					<span>
						{badge}
					</span>
				</Box>)}
			<Button variant={variant || 'controls'} onClick={onClick} disabled={disabled}>
				<VStack py={10} aria-label={ariaLabel} minWidth={64} align="center" justify="center">
					<Box fontSize="xl">
						{icon}
					</Box>
				</VStack>
			</Button>
		</Flex>);
}
StageControlButton.defaultProps = {
    disabled: false,
    variant: null,
    menu: [],
    isActive: false,
    badge: '',
    ariaLabel: '',
};
//# sourceMappingURL=StageControlButton.js.map