import React, { useContext } from 'react';
import { Box, Button, Flex, HStack, Text, VStack, Icon, } from '../themes/components';
import { ThemeContext } from 'styled-components';
import borderRadius from '../themes/foundations/borderRadius';
import { useOrientation } from '../utils/browser-utils';
import { nanoid } from '@reduxjs/toolkit';
export function MakeMenu(props) {
    const { menu } = props;
    const { colors } = useContext(ThemeContext);
    return (<Flex>
			{menu.map(({ title, defaultValue, onChange, options, }, index) => (<React.Fragment key={nanoid()}>
						{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)}>
									<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 { orientation } = useOrientation();
    const isLandscape = orientation === 'LANDSCAPE';
    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" transform={[{ rotate: isLandscape ? '90deg' : '0deg' }]}>
						{icon}
					</Box>
				</VStack>
			</Button>
		</Flex>);
}
StageControlButton.defaultProps = {
    disabled: false,
    variant: null,
    menu: [],
    isActive: false,
    badge: '',
    ariaLabel: '',
};
//# sourceMappingURL=StageControlButton.js.map