import * as React from "react"
import styled from "styled-components"
import withTranslate from "jamplay-common/i18n/withTranslate"
import ReviewItem from "./ReviewItem.component"
import { Carousel } from ".."
import { getConfig } from "jamplay-common/remote-config"
import { Primary } from "../Button"
import breakpoint from "styled-components-breakpoint"
const Container = styled.div`
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  overflow: auto;
  box-sizing: border-box;

  white-space: nowrap;

  .ReviewSlider__page {
    width: 100vw;
    min-height: 240px;
    padding-right: 320px;
    padding-bottom: 80px;
    box-sizing: border-box;
    display: flex;
    text-align: center;
    justify-content: space-between;
    &.ReviewSlider__page--unfilled-page {
      justify-content: flex-start;
    }
  }
  .ReviewSlider__no-review {
    display: block;
    text-align: center;
    padding: 0;
  }
  .ReviewSlider__no-review p {
    padding: 13px 21px;
    color: #9b9b9b;
    white-space: normal;
  }
  .ReviewSlider__no-review img {
    width: 240px;
  }
  .carousel .carousel-dots li {
    ${breakpoint("mobile")`
      width: 22px!important;
    `};
    ${breakpoint("tablet", "desktop")`
      width: 25px!important;
    `};
  }
  .carousel-dots button {
    color: ${(props) => props.theme.pumpkin} !important;
    opacity: 0.3;
  }
  .carousel .carousel-dots button.selected {
    color: ${(props) => props.theme.pumpkin} !important;
    opacity: 1;
  }
  .carousel .carousel-dots {
    padding-right: 160px;
    bottom: 0px !important;
  }
  @media screen and (max-width: 600px) {
    justify-content: center;
    .ReviewSlider__page {
      min-height: 160px;
      padding-right: 150px;
      padding-bottom: 40px;
    }

    .ReviewSlider__no-review {
      padding: 0;
    }
    .ReviewSlider__no-review p {
      color: #9b9b9b;
      font-size: 0.7rem;
    }

    .ReviewSlider__no-review img {
      width: 200px;
    }
  }
`

interface IReviewSliderPropTypes {
  page?: Array<Array<{ node: BookReviewItemData }>>
  onWriteReviewClick?: () => void
}
class ReviewSlider extends React.Component<
  IReviewSliderPropTypes & withTranslatePropType
> {
  public static defaultProps = {
    page: [],
    onWriteReviewClick: (s) => s
  }

  public render() {
    let { page, t } = this.props
    if (!page) {
      page = []
    }

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

    const WrapperSlider = Carousel

    const Reviews = page.map((reviews, i) => {
      return (
        <div key={i} className={`ReviewSlider__page ${reviews.length > 2 ? "" : "ReviewSlider__page--unfilled-page"}`}>
          {reviews.map((review) => {
            return (
              <ReviewItem
                key={review.node._id}
                message={review.node.review}
                rating={review.node.rating}
                profilePicture={review.node.user.profilePicture}
              />
            )
          })}
        </div>
      )
    })

    return (
      <Container>
        {page.length === 0 ? (
          <div className={`ReviewSlider__page ReviewSlider__no-review heavent`}>
            <img
              src={`${getConfig().publicRuntimeConfig.staticFolder ||
                ""}/ui-assets/images/icon-no-story.png`}
            />
            <p
              dangerouslySetInnerHTML={{ __html: t("book-review/non-review") }}
            />
            <Primary onClick={this.props.onWriteReviewClick}>
              {t("book/write-reviews")}
            </Primary>
          </div>
        ) : page.length > 1 ? (
          <WrapperSlider
            cellPadding={1}
            dots={page.length !== 1}
            arrows={false}
            style={{ width: "100%", height: "auto" }}
          >
            {Reviews}
          </WrapperSlider>
        ) : (
          Reviews
        )}
      </Container>
    )
  }
}

export default withTranslate(ReviewSlider) as React.ComponentClass<
  IReviewSliderPropTypes
>