import * as React from "react"
import styled from "styled-components"
import { BookThumbnail } from "./components/BookThumbnail"
import gql from "graphql-tag"
import { BookTitle } from "./components/BookTitle"
import breakpoint from "styled-components-breakpoint"
import { AuthorItemWithSubLabel } from "../Author"
import withTranslate from "jamplay-common/i18n/withTranslate"
import { Link } from "jamplay-common/routing"
import { getCategory } from "jamplay-common/enum/book-categories"

const Container = styled.div`
  position: relative;
  .BookItem--meta {
    padding: 0 8px;
  }
  ${breakpoint("mobile")`
    padding: 0 8px;
  `};
  ${breakpoint("tablet")`
    padding: 0 8px;
  `};
  ${breakpoint("desktop")`
    padding: 0 13px;
  `};

  a {
    text-decoration: none;
    color: inherit;
  }
`

export interface BookItemPropTypes extends withTranslatePropType {
  book: BookItemData
  className?: string
  loading?: boolean
  opts?: {
    width?: number | string
  }
}
type BookItemComponent = React.SFC<BookItemPropTypes> & {
  fragments?: { book: any }
}
export const BookItem: BookItemComponent = (props: BookItemPropTypes) => {
  let { t } = props
  const { book, opts } = props
  if (!opts) {
    return null
  }

  if (!t) {
    t = (s) => s
  }

  if (!book.categories) {
    return <div>{`[BookItem] ${book._id} is not provide categories `}</div>
  }

  const category = getCategory(book.categories[0])

  return (
    <Container className={`BookItem ${props.className || ""}`}>
      <div className="BookItem-content">
        <Link.BookDetail
          key={book._id}
          params={{ _id: book._id, category: category.prefix }}
        >
          <a>
            <BookThumbnail
              loading={props.loading}
              width={opts.width}
              book={props.book}
            />
          </a>
        </Link.BookDetail>
        <div className="BookItem--meta">
          <Link.BookDetail
            key={book._id}
            params={{ _id: book._id, category: category.prefix }}
          >
            <a>
              <BookTitle loading={props.loading} book={props.book} />
            </a>
          </Link.BookDetail>
          {props.book.author ? (
            <AuthorItemWithSubLabel
              {...props.book.author}
              subLabel={`${
                typeof props.book.viewCount === "number"
                  ? props.book.viewCount.toLocaleString()
                  : 0 || "0"
              } ${t("views")}`}
              loading={props.loading}
            />
          ) : null}
        </div>
      </div>
    </Container>
  )
}

BookItem.defaultProps = {
  opts: {
    width: "100%"
  }
}
BookItem.displayName = "BookItem"

BookItem.fragments = {
  book: gql`
    fragment BookItemData on Book {
      _id
      title
      thumbnailImage
      _id
      viewCount
      lastEpisodePublishedAt
      categories
      publishedAt
      author {
        _id
        name
        profilePicture
      }
    }
  `
}

BookItem.defaultProps = {
  opts: {},
  book: {
    _id: "NO_CONTENT",
    categories: ["NONE"],
    author: {
      _id: "NO_CONTENT",
      profilePicture: "NO_CONTENT",
      name: "NO_CONTENT"
    }
  }
}

export default withTranslate(BookItem)