import { FC, useState } from 'react';
import { useQuery } from 'react-query';

import PlayArrowOutlined from '@material-hu/icons/material/PlayArrowOutlined';
import CardMedia from '@material-hu/mui/CardMedia';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import { alpha, useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import fallbackImage from 'src/assets/images/black-background.webp';
import { checkThumbnailAvailability } from 'src/services/streaming';
import { LiveStream, StreamStatus } from 'src/types/stream';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { livestreamKeys } from '../queries';

type ImagePreviewLiveProps = {
  stream: LiveStream;
  onClick: () => void;
};

const ImagePreviewLive: FC<ImagePreviewLiveProps> = props => {
  const { stream, onClick } = props;
  const [isLoaded, setIsLoaded] = useState(false);

  const theme = useTheme();
  const { t } = useLokaliseTranslation('livestream');

  const handleLoad = () => setIsLoaded(true);

  const { data: isThumbnailAvailable } = useQuery(
    livestreamKeys.thumbnail(stream.thumbnailUrl || ''),
    () => checkThumbnailAvailability(stream.thumbnailUrl || ''),
    {
      enabled: !!stream.thumbnailUrl,
    },
  );

  const imageSource =
    isThumbnailAvailable && stream.thumbnailUrl
      ? stream.thumbnailUrl
      : fallbackImage;

  return (
    <Stack sx={{ position: 'relative' }}>
      <CardMedia
        src={imageSource}
        component="img"
        alt={t('IMAGE_LIVE_NOT_FOUND') as string}
        onLoad={handleLoad}
        sx={{
          borderRadius: 2,
          maxHeight: '50vh',
          minHeight: '292px',
        }}
      />
      {isLoaded && (
        <>
          <Stack
            sx={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              height: '100%',
              backgroundColor:
                theme.palette.new.action.button.background.tertiary.hover,
              borderRadius: 2,
            }}
          />
          <Stack
            sx={{
              position: 'absolute',
              top: '50%',
              left: '50%',
              transform: 'translate(-50%, -50%)',
              gap: theme.spacing(1),
              mt: theme.spacing(1),
            }}
          >
            {stream.status === StreamStatus.LIVE && (
              <>
                <IconButton
                  sx={{
                    backgroundColor: theme.palette.new.background.elements.grey,
                    height: '64px',
                    width: '64px',
                    borderRadius: '50%',
                    '&:hover': {
                      background: alpha(
                        theme.palette.new.background.elements.grey,
                        0.9,
                      ),
                    },
                  }}
                  onClick={onClick}
                >
                  <PlayArrowOutlined
                    sx={{
                      color: theme.palette.new.text.neutral.default,
                      fontSize: '32px',
                    }}
                  />
                </IconButton>
                <Typography
                  variant="globalS"
                  color={theme.palette.new.text.neutral.inverted}
                  sx={{ textAlign: 'center' }}
                >
                  {t('VIEW_LIVE')}
                </Typography>
              </>
            )}
            {stream.status === StreamStatus.WAITING_RECORDING && (
              <Stack sx={{ alignItems: 'center' }}>
                <Typography
                  variant="globalS"
                  fontWeight="fontWeightSemiBold"
                  color={theme.palette.new.text.neutral.inverted}
                >
                  {t('VIDEO_END')}
                </Typography>
                <Typography
                  variant="globalXS"
                  color={theme.palette.new.text.neutral.inverted}
                >
                  {t('SOON_TO_SEE_STREAM')}
                </Typography>
              </Stack>
            )}
          </Stack>
        </>
      )}
    </Stack>
  );
};

export default ImagePreviewLive;