import React, { useContext } from 'react';
import { ThemeContext } from 'styled-components';
import PeerName from '../components/PeerName';
import { Flex, Center, Icon } from '../themes/components';
import borderRadius from "../themes/foundations/borderRadius";
//In nametag, if user request for start presenting modal (of webinar), 
// The audio track is undefined
export default function NameTag({ audioMuted, audioTrack, name, size: selectedSize, screenshare, }) {
    const sizes = {
        sm: {
            px: '6',
            py: '1',
            iconSize: '4',
            boxSize: '14',
        },
        md: {
            px: '3',
            py: '2',
            iconSize: '6',
            boxSize: '16',
        },
    }[selectedSize];
    const hexToRGBA = (hex, alpha) => {
        const r = parseInt(hex.slice(1, 3), 16);
        const g = parseInt(hex.slice(3, 5), 16);
        const b = parseInt(hex.slice(5, 7), 16);
        if (alpha) {
            return `rgba(${r}, ${g}, ${b}, ${alpha})`;
        }
        return `rgba(${r}, ${g}, ${b}, 0)`;
    };
    const { colors } = useContext(ThemeContext);
    return (<Flex bg={selectedSize === 'sm' || screenshare
        ? hexToRGBA(colors.secondary[800], 0.5)
        : colors.secondary[800]} color="textPrimary.300" borderRadius={borderRadius.small} px={sizes.px} py={sizes.py} my={selectedSize === 'sm' && 2} position="relative" direction="row" justify="flex-start">
			{!(screenshare && audioMuted) && (<Center>
					{!audioMuted && audioTrack
        ? null
        : <Icon name="mic-off" boxSize={sizes.boxSize} fill="red"/>}
				</Center>)}
			<Center ml={sizes.px} padding={4}>
				<PeerName name={name}/>
			</Center>
		</Flex>);
}
NameTag.defaultProps = {
    size: 'md',
    screenshare: false,
};
//# sourceMappingURL=NameTag.js.map