import * as React from "react"
import { storiesOf } from "@storybook/react"
import * as common from "jamplay-common/client"
import { theme } from "../../.."
import BookReview from ".."
import { bookReview } from "./mock.data"
import ReviewSummary from "../ReviewSummary"
import { RatingStarInput } from "../RatingStarInput"
import ReviewItemInList from "../ReviewItemInList.component"
import ReviewList from "../ReviewList.component"
import ConfirmDeleteReviewDialog from "../ConfirmDeleteReviewDialog.component"
import { action } from "@storybook/addon-actions"

const providerOptions = {
  theme,
}

let x = 0
export const getReview = () => (
  {
    _id: ++x + "",
    rating: 4,
    review: "1234",
    isOwner: false,
    createdAt: new Date(Date.now() - 3 * 60 * 1000).toISOString(),
    user: {
      _id: "1",
      name: "art2",
      profilePicture: null,
    },
  }
)

const manyReviews = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1].map(getReview)

const reviews = [
  {
    _id: "1",
    rating: 3,
    review: "1234",
    isOwner: false,
    createdAt: new Date(Date.now() - 3 * 60 * 1000).toISOString(),
    user: {
      _id: "1",
      name: "art",
      profilePicture: null,
    },
  },
  {
    _id: "2",
    rating: 4,
    review: "1234",
    isOwner: true,
    createdAt: new Date(Date.now() - 3 * 60 * 1000).toISOString(),
    user: {
      _id: "1",
      name: "art2",
      profilePicture: null,
    },
  },
]

@common.provider(providerOptions)
class Provider extends React.Component {
  public render() {
    return this.props.children
  }
}

storiesOf("Review", module)
  .addDecorator((story) => <Provider>{story()}</Provider>)
 .add("Book have reviews less than 3", () => (
    <BookReview
      onWriteReviewClick={action("review-on-click")}
      bookId="5ad6f2ca8b7c1b000fac2177"
      review={bookReview.slice(0, 2)}
    />
  ))
  .add("Book have reviews", () => (
    <BookReview
      onWriteReviewClick={action("review-on-click")}
      bookId="5ad6f2ca8b7c1b000fac2177"
      review={bookReview}
    />
  ))
  .add("Book dont have review", () => (
    <BookReview
      onWriteReviewClick={action("review-on-click")}
      bookId="5a801ca2e20320001618908b"
      review={[]}
    />
  ))

  .add("Rating star input ", () => {
    return <RatingStarInput onChange={action("on-star-chage")} />
  })

  .add("Rating star input with value ", () => {
    return <RatingStarInput value={4} onChange={action("on-star-chage")} />
  })
  .add("Book review Rating Indicator", () => {
    return (
      <div style={{ width: 300 }}>
        <ReviewSummary
          onReviewChange={action("on-review-change")}
          onReviewConfirm={action("on-review-confirm")}
          reviewValue={{ content: "", rating: 0 }}
          bookRating={{
            count: 10,
            average: 10,
            eachCount: [
              {
                rating: 1,
                count: 0
              },
              {
                rating: 2,
                count: 1
              },
              {
                rating: 3,
                count: 0
              },
              {
                rating: 4,
                count: 1
              },
              {
                rating: 5,
                count: 9
              }
            ]
          }}
        />
      </div>
    )
  })
  .add("Book review Rating Indicator--disabled-form", () => {
    return (
      <div style={{ width: 300 }}>
        <ReviewSummary
          disabledReviewFormReason="disabled-translated"
          onReviewChange={action("on-review-change")}
          onReviewConfirm={action("on-review-confirm")}
          reviewValue={{ content: "", rating: 0 }}
          bookRating={{
            count: 10,
            average: 10,
            eachCount: [
              {
                rating: 5,
                count: 5
              },
              {
                rating: 4,
                count: 19
              },
              {
                rating: 3,
                count: 3
              },
              {
                rating: 2,
                count: 0
              },
              {
                rating: 1,
                count: 0
              }
            ]
          }}
        />
      </div>
    )
  })
  .add("BookReviewItemInList", () => {
    return (
      <div style={{ width: 400, border: "solid" }}>
        <ReviewItemInList
          review={{
            _id: "1",
            rating: 3,
            review: "1234",
            isOwner: false,
            createdAt: new Date(Date.now() - 3 * 60 * 1000).toISOString(),
            user: {
              _id: "1",
              name: "art",
              profilePicture: null,
            },
          }}
        />
      </div>
    )
  })
  .add("BookReviewItemInList--placeholder", () => {
    return (
      <div style={{ width: 400, border: "solid" }}>
        <ReviewItemInList
          review={null}
          isPlaceholder
        />
      </div>
    )
  })
  .add("BookReviewItemInList--isOwner", () => {
    return (
      <div style={{ width: 400, border: "solid" }}>
        <ReviewItemInList
          onDelete={action("on-delete")}
          review={{
            _id: "1",
            rating: 3,
            review: "1234",
            isOwner: true,
            createdAt: new Date(Date.now() - 3 * 60 * 1000).toISOString(),
            user: {
              _id: "1",
              name: "art",
              profilePicture: null,
            },
          }}
        />
      </div>
    )
  })
  .add("BookReviewList", () => {
    return (
      <div style={{ width: 400, margin: 40 }}>
        <ReviewList
          loading={false}
          reviews={reviews}
          hasMore={false}
        />
      </div>
    )
  })
  .add("BookReviewList--loading", () => {
    return (
      <div style={{ width: 400, margin: 40 }}>
        <ReviewList
          loading={true}
          reviews={[]}
          hasMore={false}
        />
      </div>
    )
  })
  .add("BookReviewList--loading-with-data", () => {
    return (
      <div style={{ width: 400, margin: 40 }}>
        <ReviewList
          loading={true}
          reviews={reviews}
          hasMore={false}
        />
      </div>
    )
  })
  .add("BookReviewList--load-more", () => {
    return (
      <div style={{ width: 400, margin: 40 }}>
        <ReviewList
          loading={false}
          reviews={manyReviews}
          hasMore={true}
          onLoadMore={action("load more")}
        />
      </div>
    )
  })
  .add("BookReviewList--no-load-more-if-loading", () => {
    return (
      <div style={{ width: 400, margin: 40 }}>
        <ReviewList
          loading={true}
          reviews={manyReviews}
          hasMore={true}
          onLoadMore={action("load more")}
        />
      </div>
    )
  })
  .add("ConfirmDeleteReviewDialog", () => {
    return (
      <ConfirmDeleteReviewDialog onCancel={action("cancel")} onConfirm={action("confirm")}/>
    )
  })