// Copyright 2018 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

import type { ReactNode } from 'react';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import classNames from 'classnames';
import { createPortal } from 'react-dom';
import lodash from 'lodash';
import { useSpring, animated, to } from '@react-spring/web';

import type { ReadonlyDeep } from 'type-fest';
import type {
  ConversationType,
  SaveAttachmentActionCreatorType,
} from '../state/ducks/conversations.preload.ts';
import type { LocalizerType } from '../types/Util.std.ts';
import type { MediaItemType } from '../types/MediaItem.std.ts';
import * as GoogleChrome from '../util/GoogleChrome.std.ts';
import { createLogger } from '../logging/log.std.ts';
import * as Errors from '../types/errors.std.ts';
import { Avatar, AvatarSize } from './Avatar.dom.tsx';
import { IMAGE_PNG, isImage, isVideo } from '../types/MIME.std.ts';
import { formatDateTimeForAttachment } from '../util/formatTimestamp.dom.ts';
import { formatDuration } from '../util/formatDuration.std.ts';
import { isGIF, isIncremental } from '../util/Attachment.std.ts';
import { useRestoreFocus } from '../hooks/useRestoreFocus.dom.ts';
import { usePrevious } from '../hooks/usePrevious.std.ts';
import { arrow } from '../util/keyboard.dom.ts';
import { drop } from '../util/drop.std.ts';
import { isCmdOrCtrl } from '../hooks/useKeyboardShortcuts.dom.tsx';
import type { ForwardMessagesPayload } from '../state/ducks/globalModals.preload.ts';
import { ForwardMessagesModalType } from './ForwardMessagesModal.dom.tsx';
import { useReducedMotion } from '../hooks/useReducedMotion.dom.ts';
import { formatFileSize } from '../util/formatFileSize.std.ts';
import { SECOND } from '../util/durations/index.std.ts';
import { Toast } from './Toast.dom.tsx';
import { isAbortError } from '../util/isAbortError.std.ts';
import { strictAssert } from '../util/assert.std.ts';

const { noop } = lodash;

const log = createLogger('Lightbox');

export type PropsType = {
  children?: ReactNode;
  closeLightbox: () => unknown;
  getConversation?: (id: string) => ConversationType;
  i18n: LocalizerType;
  isViewOnce?: boolean;
  media: ReadonlyArray<ReadonlyDeep<MediaItemType>>;
  playbackDisabled: boolean;
  saveAttachment: SaveAttachmentActionCreatorType;
  selectedIndex: number;
  toggleForwardMessagesModal: (payload: ForwardMessagesPayload) => unknown;
  onMediaPlaybackStart: () => void;
  onNextAttachment: () => void;
  onPrevAttachment: () => void;
  onSelectAttachment: (index: number) => void;
  hasPrevMessage?: boolean;
  hasNextMessage?: boolean;
};

const ZOOM_SCALE = 3;

const TWO_SECONDS = 2.5 * SECOND;

const INITIAL_IMAGE_TRANSFORM = {
  scale: 1,
  translateX: 0,
  translateY: 0,
};

const IMAGE_SPRING_PROPS = {
  from: INITIAL_IMAGE_TRANSFORM,
  config: {
    clamp: true,
    friction: 20,
    mass: 0.5,
    tension: 350,
  },
};

const THUMBNAIL_SPRING_CONFIG = {
  mass: 1,
  tension: 986,
  friction: 64,
  velocity: 0,
};

const THUMBNAIL_WIDTH = 44;
const THUMBNAIL_PADDING = 8;
const THUMBNAIL_FULL_WIDTH = THUMBNAIL_WIDTH + THUMBNAIL_PADDING;

export function Lightbox({
  children,
  closeLightbox,
  getConversation,
  media,
  i18n,
  isViewOnce = false,
  saveAttachment,
  selectedIndex,
  toggleForwardMessagesModal,
  playbackDisabled,
  onMediaPlaybackStart,
  onNextAttachment,
  onPrevAttachment,
  onSelectAttachment,
  hasNextMessage,
  hasPrevMessage,
}: PropsType): React.JSX.Element | null {
  const hasThumbnails = media.length > 1;
  const messageId = media.at(0)?.message.id;
  const prevMessageId = usePrevious(messageId, messageId);
  const needsAnimation = messageId !== prevMessageId;
  const [root, setRoot] = React.useState<HTMLElement | undefined>();

  const [videoElement, setVideoElement] = useState<HTMLVideoElement | null>(
    null
  );
  const [shouldShowDownloadToast, setShouldShowDownloadToast] = useState(false);
  const downloadToastTimeout = useRef<NodeJS.Timeout | number | undefined>(
    undefined
  );

  const [videoTime, setVideoTime] = useState<number | undefined>();
  const [isZoomed, setIsZoomed] = useState(false);
  const containerRef = useRef<HTMLDivElement | null>(null);
  const [focusRef] = useRestoreFocus();
  const animateRef = useRef<HTMLDivElement | null>(null);
  const dragCacheRef = useRef<
    | {
        startX: number;
        startY: number;
        translateX: number;
        translateY: number;
      }
    | undefined
  >(undefined);
  const imageRef = useRef<HTMLImageElement | null>(null);
  const zoomCacheRef = useRef<
    | {
        maxX: number;
        maxY: number;
        screenWidth: number;
        screenHeight: number;
      }
    | undefined
  >(undefined);

  const currentItem = media[selectedIndex];

  const attachment = currentItem?.attachment;
  const url = attachment?.url;
  const incrementalUrl = attachment?.incrementalUrl;
  const contentType = attachment?.contentType;

  const isAttachmentGIF = isGIF(attachment ? [attachment] : undefined);
  const isDownloading =
    attachment &&
    isIncremental(attachment) &&
    attachment.pending &&
    !attachment.path;

  const onMouseLeaveVideo = useCallback(() => {
    if (downloadToastTimeout.current) {
      clearTimeout(downloadToastTimeout.current);
      downloadToastTimeout.current = undefined;
    }
    if (!isDownloading) {
      return;
    }

    setShouldShowDownloadToast(false);
  }, [isDownloading, setShouldShowDownloadToast]);
  const onUserInteractionOnVideo = useCallback(
    (event: React.MouseEvent<HTMLVideoElement>) => {
      if (downloadToastTimeout.current) {
        clearTimeout(downloadToastTimeout.current);
        downloadToastTimeout.current = undefined;
      }
      if (!isDownloading) {
        return;
      }
      const elementRect = event.currentTarget.getBoundingClientRect();
      const bottomThreshold = elementRect.bottom - 75;

      setShouldShowDownloadToast(true);

      if (event.clientY >= bottomThreshold) {
        return;
      }
      downloadToastTimeout.current = setTimeout(onMouseLeaveVideo, TWO_SECONDS);
    },
    [isDownloading, onMouseLeaveVideo, setShouldShowDownloadToast]
  );

  const onPrevious = useCallback(
    (event: KeyboardEvent | React.MouseEvent<HTMLButtonElement>) => {
      event.preventDefault();
      event.stopPropagation();

      if (isZoomed) {
        return;
      }

      onPrevAttachment();
    },
    [isZoomed, onPrevAttachment]
  );

  const onNext = useCallback(
    (event: KeyboardEvent | React.MouseEvent<HTMLButtonElement>) => {
      event.preventDefault();
      event.stopPropagation();

      if (isZoomed) {
        return;
      }

      onNextAttachment();
    },
    [isZoomed, onNextAttachment]
  );

  const onTimeUpdate = useCallback(() => {
    if (!videoElement) {
      return;
    }
    setVideoTime(videoElement.currentTime);
  }, [setVideoTime, videoElement]);

  const handleSave = useCallback(
    (event: KeyboardEvent | React.MouseEvent<HTMLButtonElement>) => {
      if (isViewOnce) {
        return;
      }

      event.stopPropagation();
      event.preventDefault();

      const mediaItem = media[selectedIndex];
      strictAssert(mediaItem, 'Missing mediaItem');
      const { attachment: attachmentToSave, message, index } = mediaItem;

      saveAttachment(attachmentToSave, message.sentAt, index + 1);
    },
    [isViewOnce, media, saveAttachment, selectedIndex]
  );

  const handleForward = (event: React.MouseEvent<HTMLButtonElement>) => {
    if (isViewOnce) {
      return;
    }

    event.preventDefault();
    event.stopPropagation();

    closeLightbox();
    const mediaItem = media[selectedIndex];
    strictAssert(mediaItem, 'Missing mediaItem');

    toggleForwardMessagesModal({
      type: ForwardMessagesModalType.Forward,
      messageIds: [mediaItem.message.id],
    });
  };

  const onKeyDown = useCallback(
    (event: KeyboardEvent) => {
      switch (event.key) {
        case 'Escape': {
          closeLightbox();

          event.preventDefault();
          event.stopPropagation();

          break;
        }

        case arrow('start'):
          onPrevious(event);
          break;

        case arrow('end'):
          onNext(event);
          break;

        case 's':
          if (isCmdOrCtrl(event)) {
            handleSave(event);
          }
          break;

        default:
      }
    },
    [closeLightbox, onNext, onPrevious, handleSave]
  );

  const onClose = (event: React.MouseEvent<HTMLElement>) => {
    event.stopPropagation();
    event.preventDefault();

    closeLightbox();
  };

  const playVideo = useCallback(() => {
    if (!videoElement) {
      return;
    }

    if (videoElement.paused) {
      onMediaPlaybackStart();
      // oxlint-disable-next-line promise/prefer-await-to-then
      void videoElement.play().catch(error => {
        if (!isAbortError(error)) {
          log.error('Failed to play video', Errors.toLogFormat(error));
        }
      });
    } else {
      videoElement.pause();
    }
  }, [videoElement, onMediaPlaybackStart]);

  useEffect(() => {
    if (!videoElement || videoElement.paused) {
      return;
    }

    if (playbackDisabled) {
      videoElement.pause();
    }
  }, [playbackDisabled, videoElement]);

  useEffect(() => {
    const div = document.createElement('div');
    document.body.appendChild(div);
    setRoot(div);

    return () => {
      document.body.removeChild(div);
      setRoot(undefined);
    };
  }, []);

  useEffect(() => {
    const useCapture = true;
    document.addEventListener('keydown', onKeyDown, useCapture);

    return () => {
      document.removeEventListener('keydown', onKeyDown, useCapture);
    };
  }, [onKeyDown]);

  useEffect(() => {
    playVideo();

    if (!videoElement || !isViewOnce) {
      return noop;
    }

    if (isAttachmentGIF) {
      return noop;
    }

    videoElement.addEventListener('timeupdate', onTimeUpdate);

    return () => {
      videoElement.removeEventListener('timeupdate', onTimeUpdate);
    };
  }, [isViewOnce, isAttachmentGIF, onTimeUpdate, playVideo, videoElement]);

  const [{ scale, translateX, translateY }, springApi] = useSpring(
    () => IMAGE_SPRING_PROPS
  );

  const thumbnailsMarginInlineStart =
    0 - (selectedIndex * THUMBNAIL_FULL_WIDTH + THUMBNAIL_WIDTH / 2);

  const reducedMotion = useReducedMotion();

  // oxlint-disable-next-line react-hooks/exhaustive-deps -- FIXME
  const [thumbnailsStyle, thumbnailsAnimation] = useSpring(
    {
      immediate: reducedMotion,
      config: THUMBNAIL_SPRING_CONFIG,
      to: {
        marginInlineStart: thumbnailsMarginInlineStart,
        opacity: hasThumbnails ? 1 : 0,
      },
    },
    [selectedIndex, hasThumbnails]
  );

  useEffect(() => {
    if (!needsAnimation) {
      return;
    }

    thumbnailsAnimation.stop();
    thumbnailsAnimation.set({
      marginInlineStart:
        thumbnailsMarginInlineStart +
        (selectedIndex === 0 ? 1 : -1) * THUMBNAIL_FULL_WIDTH,
      opacity: 0,
    });
    drop(
      Promise.all(
        thumbnailsAnimation.start({
          marginInlineStart: thumbnailsMarginInlineStart,
          opacity: 1,
        })
      )
    );
  }, [
    needsAnimation,
    selectedIndex,
    thumbnailsMarginInlineStart,
    thumbnailsAnimation,
  ]);

  const maxBoundsLimiter = useCallback(
    (x: number, y: number): [number, number] => {
      const zoomCache = zoomCacheRef.current;

      if (!zoomCache) {
        return [0, 0];
      }

      const { maxX, maxY } = zoomCache;

      const posX = Math.min(maxX, Math.max(-maxX, x));
      const posY = Math.min(maxY, Math.max(-maxY, y));

      return [posX, posY];
    },
    []
  );

  const positionImage = useCallback(
    (ev: MouseEvent) => {
      const zoomCache = zoomCacheRef.current;

      if (!zoomCache) {
        return;
      }

      const { maxX, maxY, screenWidth, screenHeight } = zoomCache;

      const shouldTranslateX = maxX * ZOOM_SCALE > screenWidth;
      const shouldTranslateY = maxY * ZOOM_SCALE > screenHeight;

      const offsetX = screenWidth / 2 - ev.clientX;
      const offsetY = screenHeight / 2 - ev.clientY;
      const posX = offsetX * ZOOM_SCALE;
      const posY = offsetY * ZOOM_SCALE;
      const [x, y] = maxBoundsLimiter(posX, posY);

      drop(
        Promise.all(
          springApi.start({
            scale: ZOOM_SCALE,
            translateX: shouldTranslateX ? x : undefined,
            translateY: shouldTranslateY ? y : undefined,
          })
        )
      );
    },
    [maxBoundsLimiter, springApi]
  );

  const handleTouchStart = useCallback(
    (ev: TouchEvent) => {
      const [touch] = ev.touches;
      strictAssert(touch, 'Missing touch');

      dragCacheRef.current = {
        startX: touch.clientX,
        startY: touch.clientY,
        translateX: translateX.get(),
        translateY: translateY.get(),
      };
    },
    [translateY, translateX]
  );

  const handleTouchMove = useCallback(
    (ev: TouchEvent) => {
      const dragCache = dragCacheRef.current;

      if (!dragCache) {
        return;
      }

      const [touch] = ev.touches;
      strictAssert(touch, 'Missing touch');

      const deltaX = touch.clientX - dragCache.startX;
      const deltaY = touch.clientY - dragCache.startY;

      const x = dragCache.translateX + deltaX;
      const y = dragCache.translateY + deltaY;

      drop(
        Promise.all(
          springApi.start({
            scale: ZOOM_SCALE,
            translateX: x,
            translateY: y,
          })
        )
      );
    },
    [springApi]
  );

  const zoomButtonHandler = useCallback(
    (ev: React.MouseEvent<HTMLButtonElement>) => {
      ev.preventDefault();
      ev.stopPropagation();

      const imageNode = imageRef.current;
      const animateNode = animateRef.current;
      if (!imageNode || !animateNode) {
        return;
      }

      if (!isZoomed) {
        const maxX = imageNode.offsetWidth;
        const maxY = imageNode.offsetHeight;
        const screenHeight = window.innerHeight;
        const screenWidth = window.innerWidth;

        zoomCacheRef.current = {
          maxX,
          maxY,
          screenHeight,
          screenWidth,
        };

        const shouldTranslateX = maxX * ZOOM_SCALE > screenWidth;
        const shouldTranslateY = maxY * ZOOM_SCALE > screenHeight;

        const { height, left, top, width } =
          animateNode.getBoundingClientRect();

        const offsetX = ev.clientX - left - width / 2;
        const offsetY = ev.clientY - top - height / 2;
        const posX = -offsetX * ZOOM_SCALE + translateX.get();
        const posY = -offsetY * ZOOM_SCALE + translateY.get();
        const [x, y] = maxBoundsLimiter(posX, posY);

        drop(
          Promise.all(
            springApi.start({
              scale: ZOOM_SCALE,
              translateX: shouldTranslateX ? x : undefined,
              translateY: shouldTranslateY ? y : undefined,
            })
          )
        );

        setIsZoomed(true);
      } else {
        drop(Promise.all(springApi.start(INITIAL_IMAGE_TRANSFORM)));
        setIsZoomed(false);
      }
    },
    [isZoomed, maxBoundsLimiter, translateX, translateY, springApi]
  );

  useEffect(() => {
    const animateNode = animateRef.current;
    let hasListener = false;

    if (animateNode && isZoomed) {
      hasListener = true;
      document.addEventListener('mousemove', positionImage);
      document.addEventListener('touchmove', handleTouchMove);
      document.addEventListener('touchstart', handleTouchStart);
    }

    return () => {
      if (hasListener) {
        document.removeEventListener('mousemove', positionImage);
        document.removeEventListener('touchmove', handleTouchMove);
        document.removeEventListener('touchstart', handleTouchStart);
      }
    };
  }, [handleTouchMove, handleTouchStart, isZoomed, positionImage]);

  const caption = attachment?.caption;

  let content: React.JSX.Element;
  if (!contentType) {
    content = <>{children}</>;
  } else {
    const isImageTypeSupported = GoogleChrome.isImageTypeSupported(contentType);
    const isVideoTypeSupported = GoogleChrome.isVideoTypeSupported(contentType);
    const isUnsupportedImageType =
      !isImageTypeSupported && isImage(contentType);
    const isUnsupportedVideoType =
      !isVideoTypeSupported && isVideo(contentType);

    if (isImageTypeSupported) {
      if (url) {
        content = (
          <div className="Lightbox__zoomable-container">
            <button
              className="Lightbox__zoom-button"
              onClick={zoomButtonHandler}
              type="button"
            >
              <img
                alt={i18n('icu:lightboxImageAlt')}
                className="Lightbox__object"
                data-testid={attachment.cdnKey}
                onContextMenu={(ev: React.MouseEvent<HTMLImageElement>) => {
                  // These are the only image types supported by Electron's NativeImage
                  if (
                    ev &&
                    contentType !== IMAGE_PNG &&
                    !/image\/jpe?g/g.test(contentType)
                  ) {
                    ev.preventDefault();
                  }
                }}
                src={url}
                ref={imageRef}
              />
            </button>
          </div>
        );
      } else {
        content = (
          <button
            aria-label={i18n('icu:lightboxImageAlt')}
            className={classNames({
              Lightbox__object: true,
              Lightbox__unsupported: true,
              'Lightbox__unsupported--missing': true,
            })}
            onClick={onClose}
            type="button"
          />
        );
      }
    } else if (isVideoTypeSupported) {
      const shouldLoop = isAttachmentGIF || isViewOnce;

      content = (
        <video
          className="Lightbox__object Lightbox__object--video"
          controls={!shouldLoop}
          key={url || incrementalUrl}
          loop={shouldLoop}
          ref={setVideoElement}
          onMouseMove={onUserInteractionOnVideo}
          onMouseLeave={onMouseLeaveVideo}
        >
          <source src={url || incrementalUrl} />
        </video>
      );
    } else if (isUnsupportedImageType || isUnsupportedVideoType) {
      content = (
        <button
          aria-label={i18n('icu:unsupportedAttachment')}
          className={classNames({
            Lightbox__object: true,
            Lightbox__unsupported: true,
            'Lightbox__unsupported--image': isUnsupportedImageType,
            'Lightbox__unsupported--video': isUnsupportedVideoType,
          })}
          onClick={onClose}
          type="button"
        />
      );
    } else {
      log.info('Unexpected content type', { contentType });

      content = (
        <button
          aria-label={i18n('icu:unsupportedAttachment')}
          className="Lightbox__object Lightbox__unsupported Lightbox__unsupported--file"
          onClick={onClose}
          type="button"
        />
      );
    }
  }

  const hasNext =
    !isZoomed && (selectedIndex < media.length - 1 || hasNextMessage);
  const hasPrevious = !isZoomed && (selectedIndex > 0 || hasPrevMessage);

  return root
    ? createPortal(
        <div
          className={classNames('Lightbox Lightbox__container', {
            'Lightbox__container--zoom': isZoomed,
          })}
          onClick={(event: React.MouseEvent<HTMLDivElement>) => {
            event.stopPropagation();
            event.preventDefault();

            closeLightbox();
          }}
          onKeyUp={(event: React.KeyboardEvent<HTMLDivElement>) => {
            if (
              (containerRef && event.target !== containerRef.current) ||
              event.keyCode !== 27
            ) {
              return;
            }

            closeLightbox();
          }}
          ref={containerRef}
          role="presentation"
        >
          <div className="Lightbox__animated">
            <div
              className="Lightbox__main-container"
              tabIndex={-1}
              ref={focusRef}
            >
              <div className="Lightbox__header">
                {getConversation && currentItem != null ? (
                  <LightboxHeader
                    getConversation={getConversation}
                    i18n={i18n}
                    item={currentItem}
                  />
                ) : (
                  <div />
                )}
                <div className="Lightbox__controls">
                  {!isViewOnce ? (
                    <button
                      aria-label={i18n('icu:forwardMessage')}
                      className="Lightbox__button Lightbox__button--forward"
                      onClick={handleForward}
                      type="button"
                    />
                  ) : null}
                  {!isViewOnce ? (
                    <button
                      aria-label={i18n('icu:save')}
                      className="Lightbox__button Lightbox__button--save"
                      onClick={handleSave}
                      type="button"
                    />
                  ) : null}
                  <button
                    aria-label={i18n('icu:close')}
                    className="Lightbox__button Lightbox__button--close"
                    onClick={closeLightbox}
                    type="button"
                  />
                </div>
              </div>
              <animated.div
                className={classNames('Lightbox__object--container', {
                  'Lightbox__object--container--zoom': isZoomed,
                })}
                ref={animateRef}
                style={{
                  transform: to(
                    [scale, translateX, translateY],
                    (s, x, y) => `translate(${x}px, ${y}px) scale(${s})`
                  ),
                }}
              >
                {isDownloading ? (
                  <div
                    className={classNames(
                      'Lightbox__toast-container',
                      shouldShowDownloadToast
                        ? 'Lightbox__toast-container--visible'
                        : null
                    )}
                  >
                    <Toast onClose={noop}>
                      {attachment.totalDownloaded && attachment.size
                        ? i18n('icu:lightBoxDownloading', {
                            downloaded: formatFileSize(
                              attachment.totalDownloaded
                            ),
                            total: formatFileSize(attachment.size),
                          })
                        : undefined}
                    </Toast>
                  </div>
                ) : null}
                {content}

                {hasPrevious && (
                  <div className="Lightbox__nav-prev">
                    <button
                      aria-label={i18n('icu:previous')}
                      className="Lightbox__button Lightbox__button--previous"
                      onClick={onPrevious}
                      type="button"
                    />
                  </div>
                )}
                {hasNext && (
                  <div className="Lightbox__nav-next">
                    <button
                      aria-label={i18n('icu:next')}
                      className="Lightbox__button Lightbox__button--next"
                      onClick={onNext}
                      type="button"
                    />
                  </div>
                )}
              </animated.div>
            </div>
            <div className="Lightbox__footer">
              {isViewOnce && videoTime ? (
                <div className="Lightbox__timestamp">
                  {formatDuration(videoTime)}
                </div>
              ) : null}
              {caption ? (
                <div className="Lightbox__caption">{caption}</div>
              ) : null}
              <div className="Lightbox__thumbnails--container">
                <animated.div
                  className="Lightbox__thumbnails"
                  style={thumbnailsStyle}
                >
                  {hasThumbnails
                    ? media.map((item, index) => (
                        <button
                          className={classNames({
                            Lightbox__thumbnail: true,
                            'Lightbox__thumbnail--selected':
                              index === selectedIndex,
                          })}
                          key={item.attachment.thumbnail?.url}
                          type="button"
                          onClick={(
                            event: React.MouseEvent<HTMLButtonElement>
                          ) => {
                            event.stopPropagation();
                            event.preventDefault();

                            onSelectAttachment(index);
                          }}
                        >
                          {item.attachment.thumbnail?.url ? (
                            <img
                              alt={i18n('icu:lightboxImageAlt')}
                              src={item.attachment.thumbnail.url}
                            />
                          ) : (
                            <div className="Lightbox__thumbnail--unavailable" />
                          )}
                        </button>
                      ))
                    : undefined}
                </animated.div>
              </div>
            </div>
          </div>
        </div>,
        root
      )
    : null;
}

function LightboxHeader({
  getConversation,
  i18n,
  item,
}: {
  getConversation: (id: string) => ConversationType;
  i18n: LocalizerType;
  item: ReadonlyDeep<MediaItemType>;
}): React.JSX.Element {
  const { message } = item;
  const conversation = getConversation(message.conversationId);

  const now = Date.now();

  return (
    <div className="Lightbox__header--container">
      <div className="Lightbox__header--avatar">
        <Avatar
          avatarPlaceholderGradient={conversation.avatarPlaceholderGradient}
          avatarUrl={conversation.avatarUrl}
          badge={undefined}
          color={conversation.color}
          conversationType={conversation.type}
          hasAvatar={conversation.hasAvatar}
          i18n={i18n}
          phoneNumber={conversation.e164}
          profileName={conversation.profileName}
          size={AvatarSize.THIRTY_TWO}
          title={conversation.title}
        />
      </div>
      <div className="Lightbox__header--content">
        <div className="Lightbox__header--name">{conversation.title}</div>
        <div className="Lightbox__header--timestamp">
          {formatDateTimeForAttachment(i18n, message.sentAt ?? now)}
        </div>
      </div>
    </div>
  );
}
