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

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

storiesOf(`Attachments/${AttachmentVideo.name}`, module)
  .add("Default", () => (
    <AttachmentVideo
      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}
      onShowPreview={() => {}}
      onRemove={() => {}}
    />
  ))
  .add("Active", () => (
    <AttachmentVideo
      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}
      onShowPreview={() => {}}
      onRemove={() => {}}
      style="active"
    />
  ))
  .add("Selected", () => (
    <AttachmentVideo
      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}
      onShowPreview={() => {}}
      onRemove={() => {}}
      style="selected"
    />
  ))
  .add("Not Editable", () => (
    <AttachmentVideo
      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={false}
      onShowPreview={() => {}}
      onRemove={() => {}}
    />
  ))
  .add("Download pending", () => (
    <AttachmentVideo
      attachment={ATTACHMENT_MP4}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "pending" },
          preview: { type: "unavailable" },
          upload: { type: "complete" }
        })
      }
      editable={true}
      onShowPreview={() => {}}
      onRemove={() => {}}
    />
  ))
  .add("Download unavailable", () => (
    <AttachmentVideo
      attachment={ATTACHMENT_MP4}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "unavailable" },
          preview: { type: "unavailable" },
          upload: { type: "complete" }
        })
      }
      editable={true}
      onShowPreview={() => {}}
      onRemove={() => {}}
    />
  ))
  .add("Uploading", () => (
    <AttachmentVideo
      attachment={ATTACHMENT_MP4}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "pending" },
          preview: { type: "unavailable" },
          upload: { bytesUploaded: 50000, bytesTotal: 200000, type: "uploading" }
        })
      }
      editable={true}
      onShowPreview={() => {}}
      onRemove={() => {}}
    />
  ))
  .add("Uploading pending", () => (
    <AttachmentVideo
      attachment={ATTACHMENT_MP4}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "pending" },
          preview: { type: "unavailable" },
          upload: { type: "queued" }
        })
      }
      editable={true}
      onShowPreview={() => {}}
      onRemove={() => {}}
    />
  ))
  .add("Uploading unknown", () => (
    <AttachmentVideo
      attachment={ATTACHMENT_MP4}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "pending" },
          preview: { type: "unavailable" },
          upload: { type: "unknown" }
        })
      }
      editable={true}
      onShowPreview={() => {}}
      onRemove={() => {}}
    />
  ))
  .add("Uploading failed", () => (
    <AttachmentVideo
      attachment={ATTACHMENT_MP4}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "pending" },
          preview: { type: "unavailable" },
          upload: { type: "failed" }
        })
      }
      editable={true}
      onShowPreview={() => {}}
      onRemove={() => {}}
    />
  ))
  .add("Stateful", () => {
    interface State {
      downloadUrl: AttachmentDownloadUrl;
      preview: AttachmentPreview;
      upload: AttachmentUpload;
    }

    class Example extends React.PureComponent<{}, State> {
      public state: State = {
        downloadUrl: { type: "pending" },
        preview: { type: "unavailable" },
        upload: { bytesUploaded: 50000, bytesTotal: 200000, type: "uploading" }
      };

      public componentDidMount() {
        if (window !== undefined) {
          window.setTimeout(() => {
            this.setState({
              downloadUrl: { type: "pending" },
              upload: { type: "complete" }
            });
          }, 2000);

          window.setTimeout(() => {
            this.setState({
              downloadUrl: {
                type: "available",
                url: "https://storage.googleapis.com/media-session/elephants-dream/teaser.mp4"
              }
            });
          }, 5000);
        }
      }

      public render() {
        const { downloadUrl, preview, upload } = this.state;

        return (
          <AttachmentVideo
            attachment={ATTACHMENT_MP4}
            attachmentService={
              new MockAttachmentService({
                downloadUrl,
                preview,
                upload
              })
            }
            editable={true}
            onShowPreview={() => {}}
            onRemove={() => {}}
          />
        );
      }
    }

    return <Example />;
  });