import { type FC } from 'react';
import { useNavigate } from 'react-router';

import { IconVideo } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import Button from '@material-hu/components/design-system/Buttons/Button';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import Tooltip from '@material-hu/components/design-system/Tooltip';

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

import { eventsRoutes } from '../routes';

type Props = {
  eventId: number;
  isLivestreamActive: boolean;
};

export const StartLivestreamCard: FC<Props> = props => {
  const { eventId, isLivestreamActive } = props;
  const { t } = useLokaliseTranslation('events');
  const navigate = useNavigate();

  return (
    <HuCardContainer
      fullWidth
      sx={{ p: 1 }}
    >
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 2,
        }}
      >
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            gap: 1,
            flex: 1,
            minWidth: 0,
          }}
        >
          <HuAvatar
            Icon={IconVideo}
            variant="square"
            color="primary"
          />
          <Stack sx={{ minWidth: 0 }}>
            <Typography
              variant="globalS"
              fontWeight="fontWeightSemiBold"
            >
              {t('livestream:start_broadcast_title')}
            </Typography>
            <Typography
              variant="globalXS"
              color="new.text.neutral.lighter"
            >
              {t('livestream:start_broadcast_description')}
            </Typography>
          </Stack>
        </Stack>
        <Tooltip
          description={t('livestream:live_ongoing_description')}
          disableTooltip={!isLivestreamActive}
        >
          <Stack>
            <Button
              variant="primary"
              size="small"
              onClick={() => navigate(eventsRoutes.liveStream(eventId))}
              disabled={isLivestreamActive}
            >
              {t('livestream:broadcast_live')}
            </Button>
          </Stack>
        </Tooltip>
      </Stack>
    </HuCardContainer>
  );
};

export default StartLivestreamCard;