import { type IGif } from '@giphy/js-types';
import { Gif } from '@giphy/react-components';
import CloseIcon from '@material-hu/icons/material/Close';
import IconButton from '@material-hu/mui/IconButton';
import ImageListItem from '@material-hu/mui/ImageListItem';
import { alpha, useTheme } from '@material-hu/mui/styles';

import HuTooltip from '@material-hu/components/design-system/Tooltip';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

type AttachmentsGifProps = {
  gifToShow: IGif;
  onRemoveGif?: () => void;
  disabled?: boolean;
};

const AttachmentsGif = ({
  gifToShow,
  onRemoveGif,
  disabled,
}: AttachmentsGifProps) => {
  const { t } = useTranslation();
  const { palette } = useTheme();
  const HugoThemeProvider = useHuGoTheme();

  return (
    <HugoThemeProvider>
      <ImageListItem
        sx={{
          width: 'fit-content',
          height: 'fit-content',
          pt: 1.5,
          pr: 1.5,
          mt: 1,
          position: 'relative',
        }}
      >
        <Gif
          noLink
          hideAttribution
          gif={gifToShow}
          borderRadius={16}
          width={200}
        />
        {onRemoveGif && (
          <HuTooltip title={t('ELIMINATE')}>
            <IconButton
              size="small"
              sx={{
                p: 0.5,
                position: 'absolute',
                borderRadius: 1,
                right: 0,
                top: 0,
                backgroundColor: alpha(
                  palette.new.background.elements.inverted,
                  0.6,
                ),
                '&:hover': {
                  backgroundColor: palette.new.background.elements.inverted,
                },
                '& svg': {
                  color: palette.new.text.neutral.inverted,
                  fontSize: '16px',
                },
              }}
              disabled={disabled}
              onClick={onRemoveGif}
            >
              <CloseIcon />
            </IconButton>
          </HuTooltip>
        )}
      </ImageListItem>
    </HugoThemeProvider>
  );
};

export default AttachmentsGif;