import { SfuModels, useCallStateHooks } from '@stream-io/video-react-sdk';

import HuAlert from '@material-hu/components/design-system/Alert';

import { useLokaliseTranslation } from 'src/utils/i18n';

const LowBandwithAlert = () => {
  const { t } = useLokaliseTranslation('calls');
  const { useParticipants } = useCallStateHooks();
  const participants = useParticipants();

  const participantsWithPausedVideoTracks = participants.filter(p =>
    p.pausedTracks?.includes(SfuModels.TrackType.VIDEO),
  );

  if (participantsWithPausedVideoTracks.length === 0) return null;

  return (
    <HuAlert
      severity="warning"
      title={t('LOW_BANDWITH')}
      description={t('LOW_BANDWITH_DESCRIPTION')}
      hasClose
      sx={{
        position: 'absolute',
        bottom: theme => theme.spacing(2),
        left: theme => theme.spacing(3),
      }}
    />
  );
};

export default LowBandwithAlert;