import * as React from "react"
import gql from "graphql-tag"
import styled from "styled-components"
import * as moment from "moment"
import * as classNames from "classnames"
import { UserProfilePicture } from "../ProfilePicture"
import { StarIndicator } from "../Book/RatingStarIndicator"
import { AnimatedBackground } from "../ContentPlaceholder"
import withTranslate from "jamplay-common/i18n/withTranslate"

const Container = styled.div`
  position: relative;
  .review-item-in-list__meta-data {
    display: flex;
    .review-item-in-list__profile-picture {
      position: relative;
      width: 40px;
      height: 40px;
      margin-right: 8px;
    }
    .review-item-in-list__profile-picture--placeholder {
      background: ${(props) => props.theme.placeholder};
      border: 0;
    }
    .review-item-in-list__name-and-time {
      position: relative;
      display: flex;
      flex-direction: column;
      vertical-align: top;
      .review-item-in-list__name {
        position: relative;
        font-size: 1rem;
        line-height: 1.1rem;
      }
      .review-item-in-list__rating {
        margin: 3px 0;
        .StarIndicator {
          display: flex;
          color: ${(props) => props.theme.pumpkin};
        }
      }
      .review-item-in-list__rating--placeholder {
        margin: 3px 0;
        .StarIndicator {
          display: flex;
          color: ${(props) => props.theme.placeholder};
        }
      }
      .review-item-in-list__time {
        position: relative;
        color: ${(props) => props.theme.grey};
        font-style: italic;
        font-size: 0.8rem;
        line-height: 0.85rem;
        font-weight: 600;
      }
    }
  }
  .review-item-in-list__content {
    position: relative;
    margin-top: 8px;
    margin-left: 48px;
  }
  .review-item-in-list__delete {
    position: absolute;
    top: 0px;
    right: 10px;
    cursor: pointer;
    color: ${(props) => props.theme.darkGrey};
    opacity: 0.8;
    &:hover {
      opacity: 1;
    }
  }
`

export type TReview = {
  _id: string
  rating: number
  review: string
  isOwner: boolean
  createdAt: string
  user?: {
    _id: string
    name: string
    profilePicture: string | null
  }
}

export type PropsType = {
  style?: any
  className?: any
  review?: TReview | null
  isPlaceholder?: boolean
  onDelete?: any
}

const placeholderReview: TReview = {
  _id: "-1",
  createdAt: new Date(0).toISOString(),
  isOwner: false,
  rating: 5,
  review: "loading",
  user: {
    _id: "-1",
    name: "loading",
    profilePicture: null,
  },
}

const Component: React.SFC<PropsType & { t: any }> = (props) => {
  const review: TReview = props.isPlaceholder ? placeholderReview : props.review || placeholderReview
  return (
    <Container className={props.className} style={props.style}>
      <div className={"review-item-in-list__meta-data"}>
        <UserProfilePicture
          className={classNames("review-item-in-list__profile-picture", { "review-item-in-list__profile-picture--placeholder": props.isPlaceholder })}
          src={review.user ? review.user.profilePicture : null}
        />
        <div className="review-item-in-list__name-and-time">
          <div className={classNames("review-item-in-list__name", "heavent", { "review-item-in-list__name--placeholder": props.isPlaceholder })}>
            {review.user ? review.user.name : "unknown"}
            {props.isPlaceholder && <AnimatedBackground />}
          </div>
          <div className={classNames("review-item-in-list__rating", { "review-item-in-list__rating--placeholder": props.isPlaceholder })}>
            <StarIndicator average={review.rating} count={5} />
          </div>
          <div className={classNames("review-item-in-list__time", { "review-item-in-list__time--placeholder": props.isPlaceholder })}>
            {moment(review.createdAt).fromNow()}
            {props.isPlaceholder && <AnimatedBackground />}
          </div>
        </div>
      </div>
      <div className={classNames("review-item-in-list__content", { "review-item-in-list__content--placeholder": props.isPlaceholder })}>
        {review.review}
        {props.isPlaceholder && <AnimatedBackground />}
      </div>
      {
        review.isOwner && <div className="review-item-in-list__delete" onClick={props.onDelete}>
          {props.t("delete")}
        </div>}
    </Container>
  )
}

export default Object.assign(withTranslate(Component) as React.SFC<PropsType>, {
  fragments: {
    bookReview: gql`
      fragment ReviewItemInList__BookReview on BookReview {
        _id
        rating
        review
        isOwner
        createdAt
        user {
          _id
          name
          profilePicture
        }
      }
    `
  },
})