import React from "react";
import { AttachmentService } from "../../AttachmentService";
import { Attachment } from "../../util/attrs";
import { AttachmentAudio } from "../AttachmentAudio";
import { AttachmentImage } from "../AttachmentImage";
import { AttachmentCard } from "../AttachmentCard";
import { AttachmentVideo } from "../AttachmentVideo";

interface Props {
  attachment: Attachment;
  attachmentService: AttachmentService;
  editable: boolean;
  onHidePreview: () => void;
  onRemove: () => void;
  onShowPreview: () => void;
  style?: "active" | "selected";
}

export function AttachmentPreview(props: Props) {
  if (props.attachment.hidePreview) {
    return <AttachmentCard {...props} />;
  }

  const previewType = getPreviewType(props.attachment);

  switch (previewType) {
    case PreviewType.AUDIO:
      return <AttachmentAudio {...props} />;

    case PreviewType.IMAGE:
      return <AttachmentImage {...props} />;

    case PreviewType.VIDEO:
      return <AttachmentVideo {...props} />;

    case PreviewType.NONE:
    default:
      return <AttachmentCard {...props} />;
  }
}

export const enum PreviewType {
  AUDIO,
  IMAGE,
  VIDEO,
  NONE
}

export function getPreviewType(attachment: Attachment): PreviewType {
  const { type } = attachment;

  if (type !== undefined) {
    if (type.match(/^audio\//) !== null) {
      return PreviewType.AUDIO;
    }
    if (type.match(/^image\//) !== null) {
      return PreviewType.IMAGE;
    }
    if (type.match(/^video\//) !== null) {
      return PreviewType.VIDEO;
    }
  }

  return PreviewType.NONE;
}