import * as React from "react"
import { storiesOf } from "@storybook/react"
import { Pagination, PageInfo } from "../Pagination"
import * as moment from "moment"
import { Link } from "jamplay-common/routing"

function translate(s: string) {
  return s
}
storiesOf("Pagination", module)
  .add("Render with pageInfo first page", () => {
    moment.locale("th")
    const pageInfoMock: PageInfo = {
      total: 93,
      lastPage: 10,
      currentPage: 1
    }
    return (
      <div style={{ width: 800, display: "flex" }}>
        <Pagination
          url={{ pathname: "/search", query: {} }}
          {...pageInfoMock}
          t={translate}
        />
      </div>
    )
  })
  .add("Render with pageInfo", () => {
    moment.locale("th")
    const pageInfoMock: PageInfo = {
      total: 93,
      lastPage: 10,
      currentPage: 4
    }
    return (
      <div style={{ width: 800, display: "flex" }}>
        <Pagination
          url={{ pathname: "/search", query: {} }}
          {...pageInfoMock}
          t={translate}
        />
      </div>
    )
  })
  .add("Render with pageInfo page 6/10", () => {
    moment.locale("th")
    const pageInfoMock: PageInfo = {
      total: 93,
      lastPage: 10,
      currentPage: 6
    }
    return (
      <div style={{ width: 800, display: "flex" }}>
        <Pagination
          url={{ pathname: "/search", query: {} }}
          {...pageInfoMock}
          t={translate}
        />
      </div>
    )
  })
  .add("Render with pageInfo page 1/4", () => {
    moment.locale("th")
    const pageInfoMock: PageInfo = {
      total: 93,
      lastPage: 4,
      currentPage: 1
    }
    return (
      <div style={{ width: 800, display: "flex" }}>
        <Pagination
          url={{ pathname: "/search", query: {} }}
          {...pageInfoMock}
          t={translate}
        />
      </div>
    )
  })
  .add("Render with pageInfo latest page", () => {
    moment.locale("th")
    const pageInfoMock: PageInfo = {
      total: 93,
      lastPage: 10,
      currentPage: 10
    }
    return (
      <div style={{ width: 800, display: "flex" }}>
        <Pagination
          url={{ pathname: "/search", query: {} }}
          {...pageInfoMock}
          t={translate}
        />
      </div>
    )
  })
  .add("Render with pageInfo less than 5 page", () => {
    moment.locale("th")
    const pageInfoMock: PageInfo = {
      total: 93,
      lastPage: 5,
      currentPage: 4
    }
    return (
      <div style={{ width: 800, display: "flex" }}>
        <Pagination
          url={{ pathname: "/search", query: {} }}
          {...pageInfoMock}
          t={translate}
        />
      </div>
    )
  })
  .add("Render with pageInfo less than 3 page", () => {
    moment.locale("th")
    const pageInfoMock: PageInfo = {
      total: 93,
      lastPage: 3,
      currentPage: 2
    }
    return (
      <div style={{ width: 800, display: "flex" }}>
        <Pagination
          url={{ pathname: "/search", query: {} }}
          {...pageInfoMock}
          t={translate}
        />
      </div>
    )
  })
  .add("Render with pageInfo 1/2", () => {
    moment.locale("th")
    const pageInfoMock: PageInfo = {
      total: 93,
      lastPage: 2,
      currentPage: 1
    }
    return (
      <div style={{ width: 800, display: "flex" }}>
        <Pagination
          url={{ pathname: "/search", query: {} }}
          {...pageInfoMock}
          t={translate}
        />
      </div>
    )
  })
  .add("Render with pageInfo 2/2", () => {
    moment.locale("th")
    const pageInfoMock: PageInfo = {
      total: 93,
      lastPage: 2,
      currentPage: 2
    }
    return (
      <div style={{ width: 800, display: "flex" }}>
        <Pagination
          url={{ pathname: "/search", query: {} }}
          {...pageInfoMock}
          t={translate}
        />
      </div>
    )
  })
  .add("Render with pageInfo 2/3", () => {
    moment.locale("th")
    const pageInfoMock: PageInfo = {
      total: 93,
      lastPage: 3,
      currentPage: 2
    }
    return (
      <div style={{ width: 800, display: "flex" }}>
        <Pagination
          url={{ pathname: "/search", query: {} }}
          {...pageInfoMock}
          t={translate}
        />
      </div>
    )
  })
  .add("Render with pageInfo 3/3", () => {
    moment.locale("th")
    const pageInfoMock: PageInfo = {
      total: 93,
      lastPage: 3,
      currentPage: 3
    }
    return (
      <div style={{ width: 800, display: "flex" }}>
        <Pagination
          url={{ pathname: "/search", query: {} }}
          {...pageInfoMock}
          t={translate}
        />
      </div>
    )
  })
  .add("Render with pageInfo less than 50 page 2/50", () => {
    moment.locale("th")
    const pageInfoMock: PageInfo = {
      total: 93,
      lastPage: 50,
      currentPage: 2
    }
    return (
      <div style={{ width: 800, display: "flex" }}>
        <Pagination
          url={{ pathname: "/search", query: {} }}
          {...pageInfoMock}
          t={translate}
        />
      </div>
    )
  })
  .add("Render with pageInfo less than 50 page 7/50", () => {
    moment.locale("th")
    const pageInfoMock: PageInfo = {
      total: 93,
      lastPage: 50,
      currentPage: 43
    }
    return (
      <div style={{ width: 800, display: "flex" }}>
        <Pagination
          url={{ pathname: "/search", query: {} }}
          {...pageInfoMock}
          t={translate}
        />
      </div>
    )
  })

  .add("Render with custom link", () => {
    moment.locale("th")
    const pageInfoMock: PageInfo = {
      total: 93,
      lastPage: 51,
      currentPage: 43
    }
    return (
      <div style={{ width: 800, display: "flex" }}>
        <Pagination
          url={{ pathname: "/search", query: {} }}
          {...pageInfoMock}
          t={translate}
          customLink={Link.BookDetail}
          customLinkParams={{
            _id: "test",
            category: "romantic"
          }}
        />
      </div>
    )
  })
  .add("Render with pageInfo less than 100 page 140/150", () => {
    moment.locale("th")
    const pageInfoMock: PageInfo = {
      total: 93,
      lastPage: 150,
      currentPage: 140
    }
    return (
      <div style={{ width: 800, display: "flex" }}>
        <Pagination
          url={{ pathname: "/search", query: {} }}
          {...pageInfoMock}
          t={translate}
        />
      </div>
    )
  })
