import * as React from 'react';
import { Props, State } from './type';
import {Container, Divider} from './index.style';
// import { getEnv } from 'snail-helpers';
import {jsonp} from '../utils/request';
import { handlePathQuery } from '../utils/snailTargetHandler'
import { removeImgQuery } from '../utils/imgResize'

export class SnailBookreviewTable extends React.Component<Props, State> {
  public static defaultProps = new Props();
  public state = new State();

  static getDerivedStateFromProps(props){
    if(props.isEdit){
      return {
        bookReviews: props.bookReviews || [],
        title: props.title
      }
    }
  }

  public componentDidMount() {
    const { isEdit, bookReviews, title } = this.props
    if(!isEdit) {
      this.setState({
        title
      })
      let ids = bookReviews.map(item => {
        return item.bookReviewId
      })
      this.getBookReviews(ids)
    }
  }

  async getBookReviews(bookReviews: string[]) {
    let res = await jsonp(`https://p.du.163.com/bookreview/batch.json`, {
      bookReviewIds: bookReviews.join(',')
    })
    res = res.bookReviewWrappers
    this.setState({
      bookReviews: bookReviews.map(item => {
        return res[item] ? res[item].review : null
      })
    })
  }

  private clickHandler(bookReviewId: string, pos2: number) {
    const { pos, isEdit } = this.props
    handlePathQuery({
      path: 'bookreview',
      query: {
        bookReviewId
      },
      logPointId: 'acttemplate1-6',
      logQuery: {
        category: 'acttemplate',
        bookReviewId: bookReviewId,
        pos,
        pos2
      },
      isEdit
    })
  }

  getCoverUrl(item){
    let imageUrl = item.editImageUrl || item.imageUrl;
    imageUrl = removeImgQuery(imageUrl)
    if(imageUrl){
      imageUrl += '?imageView&thumbnail=280y180';
    }else{
      imageUrl = 'https://easyreadfs.nosdn.127.net/acf7ad58bf7741a687604e09795b451f_1569484677661.jpg';
    }
    return imageUrl;
  }
  
  public render() {
    const { style, divider, fontColor } = this.props
    const { bookReviews, title } = this.state
    return (
      <Container style={{...style}}>
        {
          title ? <div className="title">
            {title}
          </div> : null
        }
        <div className="list-con">
          {
            bookReviews.map((item, index) => {
              return item && (<div key={item.bookReviewId} className="item" onClick={this.clickHandler.bind(this, item.bookReviewId, index)}>
                <div className="cover" style={{backgroundImage: `url(${this.getCoverUrl(item)})`}} ></div>
                <span className="like-icon">
                  {item.likeCount}
                  <img className="icon" src="https://easyreadfs.nosdn.127.net/a275fd7940b44438a11987b5788cb5ed_1569231726829.png" alt=""/>
                </span>
                <p style={{ color: fontColor }}>{item.editTitle || item.title}</p>
              </div>)}
            )
          }
        </div>
        {
          this.state.bookReviews.length == 0 && this.props.isEdit && <div>蜗牛书评列表</div>
        }
        {
          divider && bookReviews && bookReviews.length > 0 && <Divider/>
        }
      </Container>
    )
  }
}