import * as React from "react"
import { storiesOf } from "@storybook/react"
import { ThemeProvider } from "styled-components"
import { theme } from "../../../"
import { BookItem } from "../BookItem"
import BookItemWithDescription from "../BookItemWithDescription"
import { ActionPanel } from ".."
import { BookCategories } from "../components/BookCategories"
import { StarIndicator } from "../RatingStarIndicator"
import { action } from "@storybook/addon-actions"

const books = [
  {
    _id: "test",
    synopsis: "somethingsomething",
    viewCount: 8,
    publishedAt: "2018-05-05T09:42:53.557Z",
    episodeCount: 3,

    episodes: [
      {
        title: "ห้องนอนอีกห้องหนึ่ง",
        isPublished: true,
        publishedAt: "2018-05-06T16:56:40.617Z",
        deleted: false,
        bookId: "5aed7c5408b04600106590e6",
        updatedAt: "2018-05-06T16:56:40.635Z",
        createdAt: "2018-05-06T16:56:40.635Z"
      }
    ],
    author: {
      _id: "test",
      name: "สกิลพิมพ์เต่าคลาน",
      profilePicture: null
    },

    lastEpisodePublishedAt: "2018-05-06t09:08:56.434z",
    title:
      "Friend:Small Bedroomสกิลพิมพ์เต่าคลานสกิลพิมพ์เต่าคลานสกิลพิมพ์เต่าคลาน",
    categories: ["TEEN", "Y"]
  },
  {
    tags: [],
    synopsis: "",
    viewCount: 39,
    categories: ["ROMANTIC", "ROMANTIC"],
    lastEpisodePublishedAt: "2018-05-06t09:08:56.434z",
    episodes: [
      {
        title: "ห้องนอนอีกห้องหนึ่ง",
        isPublished: true,
        publishedAt: "2018-05-06T16:56:40.617Z",
        deleted: false,
        bookId: "5aed7c5408b04600106590e6",
        updatedAt: "2018-05-06T16:56:40.635Z",
        createdAt: "2018-05-06T16:56:40.635Z"
      }
    ],
    title: "หิมะอุ่นใต้ฟ้าหนาว",
    thumbnailImage:
      "https://static.jamplay.world/migrate-img/278aab2f-b713-4803-b6fe-d8c9ed099b21",
    _id: "59a50e5040b45152401d08fa",
    author: {
      name: "อัญชรีย์",
      profilePicture:
        "https://static.jamplay.world/author/595a2ae0c98e2e63253bf7b5/c5d897c7-b2fb-42ef-8bb7-e986f96fba36.blob.jpg",
      _id: "595a2ae0c98e2e63253bf7b5"
    }
  },
  {
    categories: ["TEEN", "Y"],
    title: "ยัยโรคจิต(?)inฮาเร็มสระว่ายน้ำ",
    thumbnailImage:
      "https://static.jamplay.world/book/5acf34078b7c1b000f9637b9/c59488c1-74f1-4ead-b616-99f88e44b01f.blob.jpg",
    _id: "5aeec59dcc245a000f2ce546",
    viewCount: 24,
    episodeCount: 2,

    lastEpisodePublishedAt: "2018-05-06t09:08:56.434z",
    synopsis: `\'ยัยโรคจิต...\'\nบอกว่าไม่ได้โรคจิตไงย้าา-_-^\nฉันไม่ได้โรคจิตแค่เป็นอาการที่คลั่งผู้ชายหล่อๆและ...
        \nซิกแพค>๐<\nเห็นมั้ยล่ะว่า...โรคจิต=_=\nและเมื่อ\'ยัยโรคจิต\'โดนลากมาอยู่ใน\'ฮาเร็มสะว่ายน้ำ\'ที่มีแต่ผู้ชายหล่อๆเล่นน้ำอวดซิกแพคเนี่ย..
        .\nขอสามคำ!!!\nพัง แน่ นอน>^<`,
    author: {
      name: "Jejvxzjjzz",
      profilePicture:
        "https://static.jamplay.world/author/5abdf461f3311e0012d951f0/2e7cb4af-f252-4abd-8ad7-4e14853321b2.blob.jpg",
      _id: "5abdf461f3311e0012d951f0"
    },
    publishedAt: "2018-04-21T13:17:40.124Z",
    episodes: [
      {
        publishedAt: "2018-05-06T09:08:56.434Z"
      }
    ]
  }
]

storiesOf("BookItem", module)
  .addDecorator((story) => (
    <ThemeProvider theme={theme}>{story()}</ThemeProvider>
  ))
  .add("plain", () => {
    const book: any = books[0]
    return (
      <div style={{ marginLeft: 40 }}>
        <div style={{ width: 250 }}>
          <BookItem book={book} />
        </div>
        <br />
        <BookItem
          opts={{ width: 150 }}
          book={{
            ...book,
            title: "สุดอเวจีแน่นคอโว้วย",
            categories: ["ROMANTIC"]
          }}
        />
        <br />
        <div style={{ width: 200 }}>
          <BookItem
            opts={{ width: 180 }}
            book={{
              ...(books[1] as any),
              title:
                "No title, speechless เรื่องนี้ไม่มีชื่อเรื่อง เรื่องนี้เป็นของเธอและเขา  ",
              categories: ["ROMANTIC"]
            }}
          />
        </div>
        <br />

        <div style={{ width: 200 }}>
          <BookItem opts={{ width: 200 }} book={{ ...(books[2] as any) }} />
        </div>
        <br />
        <div style={{ width: 200 }}>
          <BookItem
            opts={{ width: 220 }}
            book={{
              ...book,
              title: "I Choose You Baby! ประกาศรักจับใจยัยตัวดี",
              categories: ["ROMANTIC"]
            }}
          />
        </div>
        <br />
        <BookItem
          opts={{ width: 350 }}
          book={{
            ...book,
            title: "The secret prefect รุ่นพี่ตัวร้ายกับนายตัวแสบ",
            categories: ["ROMANTIC"]
          }}
        />
      </div>
    )
  })
  .add("plain--loading", () => {
    const book = books[0]
    return (
      <div style={{ width: 250 }}>
        <BookItem
          loading
          book={{
            ...(book as any),
            title: "The secret prefect รุ่นพี่ตัวร้ายกับนายตัวแสบ",
            categories: ["ROMANTIC"]
          }}
        />
      </div>
    )
  })
  .add("withDescrtiption", () => {
    return (
      <div style={{ width: 550 }}>
        <BookItemWithDescription book={books[0] as any} />
      </div>
    )
  })
  .add("withDescrtiption--loading", () => {
    return (
      <div style={{ width: 550 }}>
        <BookItemWithDescription loading />
      </div>
    )
  })

  .add("ActionPanel", () => {
    return (
      <ActionPanel
        book={books[0] as any}
        onFollowBookClick={action("follow-book")}
      />
    )
  })

  .add("ActionPanel--loading", () => {
    return <ActionPanel loading />
  })
  .add("ActionPanel--owner-view", () => {
    return (
      <ActionPanel
        book={{ ...(books[0] as any), isOwner: true }}
        onFollowBookClick={action("follow-book")}
      />
    )
  })

  .add("BookCategories", () => {
    return <BookCategories book={books[0] as any} />
  })

  .add("BookCategories--loading", () => {
    return <BookCategories loading />
  })

  .add("BookRatingStar--1", () => {
    return <StarIndicator average={1} count={1} />
  })

  .add("BookRatingStar--5", () => {
    return <StarIndicator average={5} count={1} />
  })