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

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

const ATTACHMENT_JPG: Attachment = {
  hidePreview: true,
  id: "1",
  name: "mountain.jpg",
  type: "image/jpg"
};

storiesOf(`Attachments/${AttachmentCard.name}`, module)
  .add("Default", () => (
    <AttachmentCard
      attachment={ATTACHMENT_PDF}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "available", url: "http://example.com" },
          preview: { type: "unavailable" },
          upload: { type: "complete" }
        })
      }
      editable={true}
      onShowPreview={() => {}}
      onRemove={() => {}}
    />
  ))
  .add("Active", () => (
    <AttachmentCard
      attachment={ATTACHMENT_PDF}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "available", url: "http://example.com" },
          preview: { type: "unavailable" },
          upload: { type: "complete" }
        })
      }
      editable={true}
      onShowPreview={() => {}}
      onRemove={() => {}}
      style="active"
    />
  ))
  .add("Selected", () => (
    <AttachmentCard
      attachment={ATTACHMENT_PDF}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "available", url: "http://example.com" },
          preview: { type: "unavailable" },
          upload: { type: "complete" }
        })
      }
      editable={true}
      onShowPreview={() => {}}
      onRemove={() => {}}
      style="selected"
    />
  ))
  .add("Not Editable", () => (
    <AttachmentCard
      attachment={ATTACHMENT_PDF}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "available", url: "http://example.com" },
          preview: { type: "unavailable" },
          upload: { type: "complete" }
        })
      }
      editable={false}
      onShowPreview={() => {}}
      onRemove={() => {}}
    />
  ))
  .add("Download pending", () => (
    <AttachmentCard
      attachment={ATTACHMENT_PDF}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "pending" },
          preview: { type: "unavailable" },
          upload: { type: "complete" }
        })
      }
      editable={true}
      onShowPreview={() => {}}
      onRemove={() => {}}
    />
  ))
  .add("Download unavailable", () => (
    <AttachmentCard
      attachment={ATTACHMENT_PDF}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "unavailable" },
          preview: { type: "unavailable" },
          upload: { type: "complete" }
        })
      }
      editable={true}
      onShowPreview={() => {}}
      onRemove={() => {}}
    />
  ))
  .add("Uploading", () => (
    <AttachmentCard
      attachment={ATTACHMENT_JPG}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "pending" },
          preview: { type: "unavailable" },
          upload: { bytesUploaded: 50000, bytesTotal: 200000, type: "uploading" }
        })
      }
      editable={true}
      onShowPreview={() => {}}
      onRemove={() => {}}
    />
  ))
  .add("Uploading pending", () => (
    <AttachmentCard
      attachment={ATTACHMENT_JPG}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "pending" },
          preview: { type: "unavailable" },
          upload: { type: "queued" }
        })
      }
      editable={true}
      onShowPreview={() => {}}
      onRemove={() => {}}
    />
  ))
  .add("Uploading unknown", () => (
    <AttachmentCard
      attachment={ATTACHMENT_JPG}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "pending" },
          preview: { type: "unavailable" },
          upload: { type: "unknown" }
        })
      }
      editable={true}
      onShowPreview={() => {}}
      onRemove={() => {}}
    />
  ))
  .add("Uploading failed", () => (
    <AttachmentCard
      attachment={ATTACHMENT_JPG}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "pending" },
          preview: { type: "unavailable" },
          upload: { type: "failed" }
        })
      }
      editable={true}
      onShowPreview={() => {}}
      onRemove={() => {}}
    />
  ));