import { storiesOf } from "@storybook/react";
import React from "react";
import { AttachmentImage } from "..";
import image1Url from "../../../../../sample/image1.jpg";
import image2Url from "../../../../../sample/image2.jpg";
import image3Url from "../../../../../sample/image3@2x.jpg";
import image4Url from "../../../../../sample/image4.jpg";
import { MockAttachmentService } from "../../Shared/__stories__/MockAttachmentService";
import img_1000_1500_png from "./images/1000×1500.png";
import img_1000_1500_webp from "./images/1000×1500.webp";
import img_1000_1500_2x_png from "./images/1000×1500@2x.png";
import img_1000_1500_2x_webp from "./images/1000×1500@2x.webp";
import img_200_300_png from "./images/200×300.png";
import img_200_300_webp from "./images/200×300.webp";
import img_200_300_2x_png from "./images/200×300@2x.png";
import img_200_300_2x_webp from "./images/200×300@2x.webp";
import img_300_450_png from "./images/300×450.png";
import img_300_450_webp from "./images/300×450.webp";
import img_300_450_2x_png from "./images/300×450@2x.png";
import img_300_450_2x_webp from "./images/300×450@2x.webp";
import img_4000_6000_png from "./images/4000×6000.png";
import img_400_600_png from "./images/400×600.png";
import img_400_600_webp from "./images/400×600.webp";
import img_400_600_2x_png from "./images/400×600@2x.png";
import img_400_600_2x_webp from "./images/400×600@2x.webp";
import img_500_750_png from "./images/500×750.png";
import img_500_750_webp from "./images/500×750.webp";
import img_500_750_2x_png from "./images/500×750@2x.png";
import img_500_750_2x_webp from "./images/500×750@2x.webp";
import img_600_900_png from "./images/600×900.png";
import img_600_900_webp from "./images/600×900.webp";
import img_600_900_2x_png from "./images/600×900@2x.png";
import img_600_900_2x_webp from "./images/600×900@2x.webp";
import img_700_1050_png from "./images/700×1050.png";
import img_700_1050_webp from "./images/700×1050.webp";
import img_700_1050_2x_png from "./images/700×1050@2x.png";
import img_700_1050_2x_webp from "./images/700×1050@2x.webp";
import img_800_1200_png from "./images/800×1200.png";
import img_800_1200_webp from "./images/800×1200.webp";
import img_800_1200_2x_png from "./images/800×1200@2x.png";
import img_800_1200_2x_webp from "./images/800×1200@2x.webp";
import img_900_1350_png from "./images/900×1350.png";
import img_900_1350_webp from "./images/900×1350.webp";
import img_900_1350_2x_png from "./images/900×1350@2x.png";
import img_900_1350_2x_webp from "./images/900×1350@2x.webp";

const IMAGES: Array<[string, string]> = [
  ["1000×1500.png", img_1000_1500_png],
  ["1000×1500.webp", img_1000_1500_webp],
  ["1000×1500@2x.png", img_1000_1500_2x_png],
  ["1000×1500@2x.webp", img_1000_1500_2x_webp],
  ["200×300.png", img_200_300_png],
  ["200×300.webp", img_200_300_webp],
  ["200×300@2x.png", img_200_300_2x_png],
  ["200×300@2x.webp", img_200_300_2x_webp],
  ["300×450.png", img_300_450_png],
  ["300×450.webp", img_300_450_webp],
  ["300×450@2x.png", img_300_450_2x_png],
  ["300×450@2x.webp", img_300_450_2x_webp],
  ["400×600.png", img_400_600_png],
  ["400×600.webp", img_400_600_webp],
  ["400×600@2x.png", img_400_600_2x_png],
  ["400×600@2x.webp", img_400_600_2x_webp],
  ["500×750.png", img_500_750_png],
  ["500×750.webp", img_500_750_webp],
  ["500×750@2x.png", img_500_750_2x_png],
  ["500×750@2x.webp", img_500_750_2x_webp],
  ["600×900.png", img_600_900_png],
  ["600×900.webp", img_600_900_webp],
  ["600×900@2x.png", img_600_900_2x_png],
  ["600×900@2x.webp", img_600_900_2x_webp],
  ["700×1050.png", img_700_1050_png],
  ["700×1050.webp", img_700_1050_webp],
  ["700×1050@2x.png", img_700_1050_2x_png],
  ["700×1050@2x.webp", img_700_1050_2x_webp],
  ["800×1200.png", img_800_1200_png],
  ["800×1200.webp", img_800_1200_webp],
  ["800×1200@2x.png", img_800_1200_2x_png],
  ["800×1200@2x.webp", img_800_1200_2x_webp],
  ["900×1350.png", img_900_1350_png],
  ["900×1350.webp", img_900_1350_webp],
  ["900×1350@2x.png", img_900_1350_2x_png],
  ["900×1350@2x.webp", img_900_1350_2x_webp]
];

storiesOf(`Attachments/${AttachmentImage.name}`, module)
  .add("Default", () => (
    <AttachmentImage
      attachment={{
        hidePreview: false,
        id: "1",
        name: "mountain.jpg",
        type: "image/jpg"
      }}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "available", url: "http://example.com" },
          preview: { type: "image", url: image1Url },
          upload: { type: "complete" }
        })
      }
      editable={true}
      onHidePreview={() => {}}
      onRemove={() => {}}
    />
  ))
  .add("Active", () => (
    <AttachmentImage
      attachment={{
        hidePreview: false,
        id: "1",
        name: "mountain.jpg",
        type: "image/jpg"
      }}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "available", url: "http://example.com" },
          preview: { type: "image", url: image1Url },
          upload: { type: "complete" }
        })
      }
      editable={true}
      onHidePreview={() => {}}
      onRemove={() => {}}
      style="active"
    />
  ))
  .add("Selected", () => (
    <AttachmentImage
      attachment={{
        hidePreview: false,
        id: "1",
        name: "mountain.jpg",
        type: "image/jpg"
      }}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "available", url: "http://example.com" },
          preview: { type: "image", url: image1Url },
          upload: { type: "complete" }
        })
      }
      editable={true}
      onHidePreview={() => {}}
      onRemove={() => {}}
      style="selected"
    />
  ))
  .add("Not editable", () => (
    <AttachmentImage
      attachment={{
        hidePreview: false,
        id: "1",
        name: "mountain.jpg",
        type: "image/jpg"
      }}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "available", url: "http://example.com" },
          preview: { type: "image", url: image1Url },
          upload: { type: "complete" }
        })
      }
      editable={false}
      onHidePreview={() => {}}
      onRemove={() => {}}
    />
  ))
  .add("Multiple sources", () => (
    <AttachmentImage
      attachment={{
        hidePreview: false,
        id: "1",
        name: "mountain.jpg",
        type: "image/jpg"
      }}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "available", url: img_4000_6000_png },
          preview: {
            type: "image",
            sources: IMAGES.map(([name, url]) => {
              const type = `image/${name.match(/\.(.+)$/)![1]}`;
              const [, width] = name.match(/^(\d+)×(\d+)/)!;
              const muliplierMatch = name.match(/@(\d)x/);
              const multiplier = muliplierMatch !== null ? Number(muliplierMatch[1]) : 1;
              return {
                type,
                width: Number(width) * multiplier,
                url
              };
            }),
            url: img_4000_6000_png
          },
          upload: { type: "complete" }
        })
      }
      editable={true}
      onHidePreview={() => {}}
      onRemove={() => {}}
    />
  ))
  .add("Tall image", () => (
    <AttachmentImage
      attachment={{
        hidePreview: false,
        id: "1",
        name: "sunset.jpg",
        type: "image/jpg"
      }}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "available", url: "http://example.com" },
          preview: { type: "image", url: image2Url },
          upload: { type: "complete" }
        })
      }
      editable={true}
      onHidePreview={() => {}}
      onRemove={() => {}}
    />
  ))
  .add("Small image", () => (
    <AttachmentImage
      attachment={{
        hidePreview: false,
        id: "1",
        name: "tree.jpg",
        type: "image/jpg",
        naturalSize: {
          width: 20,
          height: 20
        }
      }}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "available", url: "http://example.com" },
          preview: { type: "image", url: image4Url },
          upload: { type: "complete" }
        })
      }
      editable={true}
      onHidePreview={() => {}}
      onRemove={() => {}}
    />
  ))
  .add("Retina image (@2x)", () => (
    <AttachmentImage
      attachment={{
        hidePreview: false,
        id: "1",
        name: "hand.jpg",
        type: "image/jpg",
        naturalSize: {
          width: 60,
          height: 60
        }
      }}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "available", url: "http://example.com" },
          preview: { type: "image", url: image3Url },
          upload: { type: "complete" }
        })
      }
      editable={true}
      onHidePreview={() => {}}
      onRemove={() => {}}
    />
  ))
  .add("Image over network", () => (
    <AttachmentImage
      attachment={{
        hidePreview: false,
        id: "1",
        name: "BennyTrapp_Pelophylax_shquipericus_Montenegro.jpg",
        type: "image/jpg",
        naturalSize: {
          width: 4256,
          height: 2832
        }
      }}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: {
            type: "available",
            url: "https://upload.wikimedia.org/wikipedia/commons/3/32/BennyTrapp_Pelophylax_shquipericus_Montenegro.jpg"
          },
          preview: {
            type: "image",
            url: "https://upload.wikimedia.org/wikipedia/commons/3/32/BennyTrapp_Pelophylax_shquipericus_Montenegro.jpg"
          },
          upload: { type: "complete" }
        })
      }
      editable={true}
      onHidePreview={() => {}}
      onRemove={() => {}}
    />
  ))
  .add("Uploading", () => (
    <AttachmentImage
      attachment={{
        hidePreview: false,
        id: "1",
        name: "mountain.jpg",
        type: "image/jpg"
      }}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "available", url: "http://example.com" },
          preview: { type: "image", url: image1Url },
          upload: { bytesUploaded: 50000, bytesTotal: 200000, type: "uploading" }
        })
      }
      editable={true}
      onHidePreview={() => {}}
      onRemove={() => {}}
    />
  ))
  .add("Uploading pending", () => (
    <AttachmentImage
      attachment={{
        hidePreview: false,
        id: "1",
        name: "mountain.jpg",
        type: "image/jpg"
      }}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "available", url: "http://example.com" },
          preview: { type: "image", url: image1Url },
          upload: { type: "queued" }
        })
      }
      editable={true}
      onHidePreview={() => {}}
      onRemove={() => {}}
    />
  ))
  .add("Uploading failed", () => (
    <AttachmentImage
      attachment={{
        hidePreview: false,
        id: "1",
        name: "mountain.jpg",
        type: "image/jpg"
      }}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "available", url: "http://example.com" },
          preview: { type: "image", url: image1Url },
          upload: { type: "failed" }
        })
      }
      editable={true}
      onHidePreview={() => {}}
      onRemove={() => {}}
    />
  ))
  .add("Uploading unknown", () => (
    <AttachmentImage
      attachment={{
        hidePreview: false,
        id: "1",
        name: "mountain.jpg",
        type: "image/jpg"
      }}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "available", url: "http://example.com" },
          preview: { type: "image", url: image1Url },
          upload: { type: "unknown" }
        })
      }
      editable={true}
      onHidePreview={() => {}}
      onRemove={() => {}}
    />
  ))
  .add("Uploading complete", () => (
    <AttachmentImage
      attachment={{
        hidePreview: false,
        id: "1",
        name: "mountain.jpg",
        type: "image/jpg"
      }}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "available", url: "http://example.com" },
          preview: { type: "image", url: image1Url },
          upload: { type: "complete" }
        })
      }
      editable={true}
      onHidePreview={() => {}}
      onRemove={() => {}}
    />
  ))
  .add("Preview unavailable", () => (
    <AttachmentImage
      attachment={{
        hidePreview: false,
        id: "1",
        name: "mountain.jpg",
        type: "image/jpg"
      }}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "unavailable" },
          preview: { type: "unavailable" },
          upload: { type: "complete" }
        })
      }
      editable={true}
      onHidePreview={() => {}}
      onRemove={() => {}}
    />
  ))
  .add("Preview unavailable active", () => (
    <AttachmentImage
      attachment={{
        hidePreview: false,
        id: "1",
        name: "mountain.jpg",
        type: "image/jpg"
      }}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "unavailable" },
          preview: { type: "unavailable" },
          upload: { type: "complete" }
        })
      }
      editable={true}
      onHidePreview={() => {}}
      onRemove={() => {}}
      style="active"
    />
  ))
  .add("Preview unavailable selected", () => (
    <AttachmentImage
      attachment={{
        hidePreview: false,
        id: "1",
        name: "mountain.jpg",
        type: "image/jpg"
      }}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "unavailable" },
          preview: { type: "unavailable" },
          upload: { type: "complete" }
        })
      }
      editable={true}
      onHidePreview={() => {}}
      onRemove={() => {}}
      style="selected"
    />
  ))
  .add("Preview unavailable uploading", () => (
    <AttachmentImage
      attachment={{
        hidePreview: false,
        id: "1",
        name: "mountain.jpg",
        type: "image/jpg"
      }}
      attachmentService={
        new MockAttachmentService({
          downloadUrl: { type: "available", url: "http://example.com" },
          preview: { type: "unavailable" },
          upload: { bytesUploaded: 50000, bytesTotal: 200000, type: "uploading" }
        })
      }
      editable={true}
      onHidePreview={() => {}}
      onRemove={() => {}}
    />
  ));