import React from 'react';
import { Icon, Icons, config, toRem } from 'folds';
import { MatrixEvent, MsgType } from 'matrix-js-sdk';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
import { useDecryptedMediaUrl } from '../../hooks/useDecryptedMediaUrl';
import { getThumbMxc } from '../../utils/mediaThumb';
import { MessageEvent } from '../../../types/matrix/room';

const SIZE = 36;

/** Whether a reply quote for this event should carry a thumbnail. */
export const hasReplyMedia = (mEvent: MatrixEvent | null | undefined): boolean => {
  if (!mEvent || mEvent.isRedacted()) return false;
  if (mEvent.getType() === MessageEvent.Sticker) return true;
  const msgtype = mEvent.getContent().msgtype;
  return msgtype === MsgType.Image || msgtype === MsgType.Video;
};

/**
 * [Gitea #151] 36 px thumbnail in a reply quote for an image/video/sticker.
 * Uses the event's own thumbnail (decrypting it for E2EE media), never the
 * full-size file.
 */
export function ReplyMediaThumb({ mEvent }: { mEvent: MatrixEvent }) {
  const mx = useMatrixClient();
  const useAuthentication = useMediaAuthentication();
  const content = mEvent.getContent();
  const isVideo = content.msgtype === MsgType.Video;
  const thumbMxc = getThumbMxc(mEvent);
  const info = content.info as Record<string, unknown> | undefined;
  const encInfo = content.file
    ? ((info?.thumbnail_file as typeof content.file | undefined) ?? content.file)
    : undefined;
  const mimeType =
    (info?.thumbnail_info as { mimetype?: string } | undefined)?.mimetype ??
    (info?.mimetype as string | undefined);
  const media = useDecryptedMediaUrl(mx, thumbMxc, encInfo, useAuthentication, mimeType);

  return (
    <span
      aria-hidden
      style={{
        position: 'relative',
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: toRem(SIZE),
        height: toRem(SIZE),
        flexShrink: 0,
        borderRadius: config.radii.R300,
        overflow: 'hidden',
        background: 'rgba(127, 127, 127, 0.15)',
      }}
    >
      {media.status === 'ok' ? (
        <img
          src={media.url}
          alt=""
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
        />
      ) : (
        <Icon size="100" src={isVideo ? Icons.Play : Icons.Photo} />
      )}
      {isVideo && media.status === 'ok' && (
        <Icon
          size="50"
          src={Icons.Play}
          filled
          style={{ position: 'absolute', color: 'white', filter: 'drop-shadow(0 0 2px black)' }}
        />
      )}
    </span>
  );
}