import React from 'react';
import { HMSPeerType, selectConnectionQualityByPeerID, selectPeerTypeByID, useHMSStore } from '@100mslive/react-sdk';
import { PoorConnectivityIcon } from '@100mslive/react-icons';
import { styled, Tooltip, useTheme } from '../../..';
// @ts-ignore
import { getColor, getTooltipText } from './connectionQualityUtils';
const Wrapper = styled('span', {
width: '28px',
height: '28px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '$round',
variants: {
isTile: {
true: {
width: 'unset',
height: 'unset',
},
},
},
});
export const ConnectionIndicator = ({
peerId,
isTile = false,
hideBg = false,
}: {
peerId: string;
isTile?: boolean;
hideBg?: boolean;
}) => {
const downlinkQuality = useHMSStore(selectConnectionQualityByPeerID(peerId))?.downlinkQuality;
const peerType = useHMSStore(selectPeerTypeByID(peerId));
const { theme } = useTheme();
const defaultColor = theme.colors.on_surface_low;
if (downlinkQuality === -1 || downlinkQuality === undefined || peerType === HMSPeerType.SIP) {
return null;
}
if (downlinkQuality === 0) {
return (
);
}
const size = isTile ? 12 : 16;
return (
);
};