import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';

import { Fade, Stack } from '@mui/material';

import { getConfettiColor } from '../../../utils/colors';
import Pills from '../../design-system/Pills';

import ConfettiSvg from './components/ConfettiSvg';
import { type ConfettiBackgroundProps } from './types';

export default function ConfettiBackground({
  bgColor,
  coverPicture,
  showConfetti,
  showPoints,
  points,
  stylesOptions = {},
  cropHeight,
  cropWidth,
}: ConfettiBackgroundProps) {
  const { t } = useTranslation('material_hu_only');
  const { confettiColor } = getConfettiColor(bgColor);
  const showPointsPill = Boolean(points && points !== '0' && showPoints);

  const pointsPillLabel = t('hu_confetti_background.points_label', {
    count: Math.abs(parseInt(points)),
    symbol: parseInt(points) > 0 ? '+' : '-',
  });

  const coverPictureSrc = useMemo(() => {
    if (!coverPicture) return '';
    const isFile = coverPicture instanceof File;
    return isFile ? URL.createObjectURL(coverPicture) : coverPicture;
  }, [coverPicture]);

  const { borderRadius = 1, height = 236, maxWidth = 750 } = stylesOptions;

  const isCustomFile = cropHeight && cropWidth && coverPicture;

  const minHeight = isCustomFile ? cropHeight : height;

  const aspectRatio = isCustomFile ? cropWidth / cropHeight : 'auto';

  return (
    <Stack
      sx={{
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <Stack
        sx={{
          position: 'relative',
          width: '100%',
          maxWidth,
          minHeight,
          borderRadius,
          alignSelf: 'center',
        }}
      >
        <Stack
          sx={{
            zIndex: 1,
            minHeight,
            aspectRatio,
            borderRadius,
            backgroundColor: bgColor,
          }}
        />
        {coverPictureSrc && (
          <Stack
            sx={{
              position: 'absolute',
              inset: 0,
              zIndex: 2,
              width: '100%',
              height: '100%',
              '& img': {
                zIndex: 100,
                width: '100%',
                height: '100%',
                borderRadius,
              },
            }}
          >
            <img
              src={coverPictureSrc}
              alt=""
            />
          </Stack>
        )}
        {showConfetti && !coverPictureSrc && (
          <Fade
            in={showConfetti}
            timeout={300}
          >
            <Stack
              sx={{
                position: 'absolute',
                inset: 0,
                zIndex: 3,
                width: '100%',
                height: '100%',
              }}
            >
              <ConfettiSvg color={confettiColor} />
            </Stack>
          </Fade>
        )}
        {showPointsPill && (
          <Fade
            in={showPointsPill}
            timeout={300}
          >
            <Stack sx={{ position: 'absolute', top: 12, right: 12, zIndex: 4 }}>
              <Pills
                sx={{ textTransform: 'lowercase' }}
                type="neutral"
                hasIcon={false}
                label={pointsPillLabel}
              />
            </Stack>
          </Fade>
        )}
      </Stack>
    </Stack>
  );
}