import { storiesOf } from "@storybook/react";
import React from "react";
import { Attachment } from "../../../util/attrs";
import { MockAttachmentService } from "../../Shared/__stories__/MockAttachmentService";
import { AttachmentPreview } from "..";

const ATTACHMENT_PDF: Attachment = {
  hidePreview: true,
  id: "1",
  name: "xSource Control Engagement Letter.pdf"
};

const ATTACHMENT_MP3: Attachment = {
  hidePreview: false,
  id: "1",
  name: "Elephant’s Dream – The Wires",
  type: "audio/mpeg"
};

const ATTACHMENT_MP3_PREVIEW_HIDDEN: Attachment = {
  hidePreview: true,
  id: "1",
  name: "Elephant’s Dream – The Wires",
  type: "audio/mpeg"
};

const ATTACHMENT_MP4: Attachment = {
  hidePreview: false,
  id: "1",
  name: "Elephant’s Dream – The Wires",
  type: "video/mp4"
};

const ATTACHMENT_MP4_PREVIEW_HIDDEN: Attachment = {
  hidePreview: true,
  id: "1",
  name: "Elephant’s Dream – The Wires",
  type: "video/mp4"
};


storiesOf(`Attachments/${AttachmentPreview.name}`, module)
  .add("File", () => (
    <AttachmentPreview
      attachment={ATTACHMENT_PDF}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "available", url: "http://example.com" },
          preview: { type: "unavailable" },
          upload: { type: "complete" }
        })
      }
      editable={true}
      onHidePreview={() => {}}
      onShowPreview={() => {}}
      onRemove={() => {}}
    />
  ))
  .add("Audio", () => (
    <AttachmentPreview
      attachment={ATTACHMENT_MP3}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "available", url: "https://storage.googleapis.com/media-session/elephants-dream/the-wires.mp3" },
          preview: { type: "unavailable" },
          upload: { type: "complete" }
        })
      }
      editable={true}
      onHidePreview={() => {}}
      onShowPreview={() => {}}
      onRemove={() => {}}
    />
  ))
  .add("Audio no preview", () => (
    <AttachmentPreview
      attachment={ATTACHMENT_MP3_PREVIEW_HIDDEN}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "available", url: "https://storage.googleapis.com/media-session/elephants-dream/the-wires.mp3" },
          preview: { type: "unavailable" },
          upload: { type: "complete" }
        })
      }
      editable={true}
      onHidePreview={() => {}}
      onShowPreview={() => {}}
      onRemove={() => {}}
    />))
    .add("Video", () => (
      <AttachmentPreview
        attachment={ATTACHMENT_MP4}
        attachmentService={
          new MockAttachmentService({
            downloadUrl: { type: "available", url: "https://storage.googleapis.com/media-session/elephants-dream/teaser.mp4" },
            preview: { type: "unavailable" },
            upload: { type: "complete" }
          })
        }
        editable={true}
        onHidePreview={() => {}}
        onShowPreview={() => {}}
        onRemove={() => {}}
      />
    ))
    .add("Video no preview", () => (
      <AttachmentPreview
        attachment={ATTACHMENT_MP4_PREVIEW_HIDDEN}
        attachmentService={
          new MockAttachmentService({
            downloadUrl: { type: "available", url: "https://storage.googleapis.com/media-session/elephants-dream/teaser.mp4" },
            preview: { type: "unavailable" },
            upload: { type: "complete" }
          })
        }
        editable={true}
        onHidePreview={() => {}}
        onShowPreview={() => {}}
        onRemove={() => {}}
      />
  ));