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

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

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

type AutoplayBlockedAlertProps = {
  variant: 'call' | 'livestream';
};

const AutoplayBlockedAlert = ({ variant }: AutoplayBlockedAlertProps) => {
  const { t } = useLokaliseTranslation('calls');
  const call = useCall();
  const { useIsAutoplayBlocked } = useCallStateHooks();
  const isBlocked = useIsAutoplayBlocked();

  if (!isBlocked) return null;

  const description =
    variant === 'call'
      ? t('autoplay_blocked_description_call')
      : t('autoplay_blocked_description_livestream');

  return (
    <HuAlert
      severity="warning"
      title={t('autoplay_blocked')}
      description={description}
      action={{
        text: t('autoplay_blocked_action'),
        onClick: () => call?.resumeAudio(),
      }}
      sx={{
        position: 'absolute',
        bottom: theme => theme.spacing(2),
        left: theme => theme.spacing(3),
        zIndex: 2,
        maxWidth: '480px',
        '& .MuiAlert-message': {
          maxWidth: '268px',
          overflow: 'hidden',
        },
      }}
    />
  );
};

export default AutoplayBlockedAlert;