session-desktop/ts/components/conversation/ImageGrid.tsx

import React from 'react';
import classNames from 'classnames';

import {
  areAllAttachmentsVisual,
  AttachmentType,
  AttachmentTypeWithPath,
  getAlt,
  getImageDimensions,
  getThumbnailUrl,
  getUrl,
  isVideoAttachment,
} from '../../types/Attachment';

import { Image } from './Image';

type Props = {
  attachments: Array<AttachmentTypeWithPath>;
  withContentAbove?: boolean;
  withContentBelow?: boolean;
  bottomOverlay?: boolean;

  onError: () => void;
  onClickAttachment?: (attachment: AttachmentTypeWithPath | AttachmentType) => void;
};

export const ImageGrid = (props: Props) => {
  // tslint:disable-next-line max-func-body-length */
  const {
    attachments,
    bottomOverlay,
    onError,
    onClickAttachment,
    withContentAbove,
    withContentBelow,
  } = props;

  const curveTopLeft = !Boolean(withContentAbove);
  const curveTopRight = curveTopLeft;

  const curveBottom = !Boolean(withContentBelow);
  const curveBottomLeft = curveBottom;
  const curveBottomRight = curveBottom;

  const withBottomOverlay = Boolean(bottomOverlay && curveBottom);

  if (!attachments || !attachments.length) {
    return null;
  }

  if (attachments.length === 1 || !areAllAttachmentsVisual(attachments)) {
    const { height, width } = getImageDimensions(attachments[0]);

    return (
      <div className={classNames('module-image-grid', 'module-image-grid--one-image')}>
        <Image
          alt={getAlt(attachments[0])}
          bottomOverlay={withBottomOverlay}
          curveTopLeft={curveTopLeft}
          curveTopRight={curveTopRight}
          curveBottomLeft={curveBottomLeft}
          curveBottomRight={curveBottomRight}
          attachment={attachments[0]}
          playIconOverlay={isVideoAttachment(attachments[0])}
          height={height}
          width={width}
          url={getUrl(attachments[0])}
          onClick={onClickAttachment}
          onError={onError}
        />
      </div>
    );
  }

  if (attachments.length === 2) {
    return (
      <div className="module-image-grid">
        <Image
          alt={getAlt(attachments[0])}
          attachment={attachments[0]}
          bottomOverlay={withBottomOverlay}
          curveTopLeft={curveTopLeft}
          curveBottomLeft={curveBottomLeft}
          playIconOverlay={isVideoAttachment(attachments[0])}
          height={149}
          width={149}
          url={getThumbnailUrl(attachments[0])}
          onClick={onClickAttachment}
          onError={onError}
        />
        <Image
          alt={getAlt(attachments[1])}
          bottomOverlay={withBottomOverlay}
          curveTopRight={curveTopRight}
          curveBottomRight={curveBottomRight}
          playIconOverlay={isVideoAttachment(attachments[1])}
          height={149}
          width={149}
          attachment={attachments[1]}
          url={getThumbnailUrl(attachments[1])}
          onClick={onClickAttachment}
          onError={onError}
        />
      </div>
    );
  }

  if (attachments.length === 3) {
    return (
      <div className="module-image-grid">
        <Image
          alt={getAlt(attachments[0])}
          bottomOverlay={withBottomOverlay}
          curveTopLeft={curveTopLeft}
          curveBottomLeft={curveBottomLeft}
          attachment={attachments[0]}
          playIconOverlay={isVideoAttachment(attachments[0])}
          height={200}
          width={199}
          url={getUrl(attachments[0])}
          onClick={onClickAttachment}
          onError={onError}
        />
        <div className="module-image-grid__column">
          <Image
            alt={getAlt(attachments[1])}
            curveTopRight={curveTopRight}
            height={99}
            width={99}
            attachment={attachments[1]}
            playIconOverlay={isVideoAttachment(attachments[1])}
            url={getThumbnailUrl(attachments[1])}
            onClick={onClickAttachment}
            onError={onError}
          />
          <Image
            alt={getAlt(attachments[2])}
            bottomOverlay={withBottomOverlay}
            curveBottomRight={curveBottomRight}
            height={99}
            width={99}
            attachment={attachments[2]}
            playIconOverlay={isVideoAttachment(attachments[2])}
            url={getThumbnailUrl(attachments[2])}
            onClick={onClickAttachment}
            onError={onError}
          />
        </div>
      </div>
    );
  }

  if (attachments.length === 4) {
    return (
      <div className="module-image-grid">
        <div className="module-image-grid__column">
          <div className="module-image-grid__row">
            <Image
              alt={getAlt(attachments[0])}
              curveTopLeft={curveTopLeft}
              attachment={attachments[0]}
              playIconOverlay={isVideoAttachment(attachments[0])}
              height={149}
              width={149}
              url={getThumbnailUrl(attachments[0])}
              onClick={onClickAttachment}
              onError={onError}
            />
            <Image
              alt={getAlt(attachments[1])}
              curveTopRight={curveTopRight}
              playIconOverlay={isVideoAttachment(attachments[1])}
              height={149}
              width={149}
              attachment={attachments[1]}
              url={getThumbnailUrl(attachments[1])}
              onClick={onClickAttachment}
              onError={onError}
            />
          </div>
          <div className="module-image-grid__row">
            <Image
              alt={getAlt(attachments[2])}
              bottomOverlay={withBottomOverlay}
              curveBottomLeft={curveBottomLeft}
              playIconOverlay={isVideoAttachment(attachments[2])}
              height={149}
              width={149}
              attachment={attachments[2]}
              url={getThumbnailUrl(attachments[2])}
              onClick={onClickAttachment}
              onError={onError}
            />
            <Image
              alt={getAlt(attachments[3])}
              bottomOverlay={withBottomOverlay}
              curveBottomRight={curveBottomRight}
              playIconOverlay={isVideoAttachment(attachments[3])}
              height={149}
              width={149}
              attachment={attachments[3]}
              url={getThumbnailUrl(attachments[3])}
              onClick={onClickAttachment}
              onError={onError}
            />
          </div>
        </div>
      </div>
    );
  }

  const moreMessagesOverlay = attachments.length > 5;
  const moreMessagesOverlayText = moreMessagesOverlay ? `+${attachments.length - 5}` : undefined;

  return (
    <div className="module-image-grid">
      <div className="module-image-grid__column">
        <div className="module-image-grid__row">
          <Image
            alt={getAlt(attachments[0])}
            curveTopLeft={curveTopLeft}
            attachment={attachments[0]}
            playIconOverlay={isVideoAttachment(attachments[0])}
            height={149}
            width={149}
            url={getThumbnailUrl(attachments[0])}
            onClick={onClickAttachment}
            onError={onError}
          />
          <Image
            alt={getAlt(attachments[1])}
            curveTopRight={curveTopRight}
            playIconOverlay={isVideoAttachment(attachments[1])}
            height={149}
            width={149}
            attachment={attachments[1]}
            url={getThumbnailUrl(attachments[1])}
            onClick={onClickAttachment}
            onError={onError}
          />
        </div>
        <div className="module-image-grid__row">
          <Image
            alt={getAlt(attachments[2])}
            bottomOverlay={withBottomOverlay}
            curveBottomLeft={curveBottomLeft}
            playIconOverlay={isVideoAttachment(attachments[2])}
            height={99}
            width={99}
            attachment={attachments[2]}
            url={getThumbnailUrl(attachments[2])}
            onClick={onClickAttachment}
            onError={onError}
          />
          <Image
            alt={getAlt(attachments[3])}
            bottomOverlay={withBottomOverlay}
            playIconOverlay={isVideoAttachment(attachments[3])}
            height={99}
            width={98}
            attachment={attachments[3]}
            url={getThumbnailUrl(attachments[3])}
            onClick={onClickAttachment}
            onError={onError}
          />
          <Image
            alt={getAlt(attachments[4])}
            bottomOverlay={withBottomOverlay}
            curveBottomRight={curveBottomRight}
            playIconOverlay={isVideoAttachment(attachments[4])}
            height={99}
            width={99}
            darkOverlay={moreMessagesOverlay}
            overlayText={moreMessagesOverlayText}
            attachment={attachments[4]}
            url={getThumbnailUrl(attachments[4])}
            onClick={onClickAttachment}
            onError={onError}
          />
        </div>
      </div>
    </div>
  );
};