import * as React from 'react';
import { isSnail } from 'snail-helpers';
import { getLogInstance } from 'snail-log';
import { Container } from './item.style';
import { handleScheme } from '../../utils/snailTargetHandler'

export class Props {
  id: string;
  bookData: any;
  userDesc: string;
  bookDesc: string;
  title: string;
  isEdit: boolean;
}

export class State {
  public shareRead;
  public shareReadData;
  public timerId = 0;
  public status = 1;
  public isBtnShow = false;
  public leftBtnText = '';
  public rightBtnText = '';
  public leftClass = '';
  public rightClass = '';
  public priceUnit = '';
}

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

  /**
   * 找人共读，跳转书籍共读广场
   */
  public goFindShareRead() {
    const {isEdit, id} = this.props;
    const target = `nesnailreader://shareReadSquare?bookId=${id}`;
    handleScheme(
      {
        target, 
        logPointId: 'acttemplate1-15', 
        logQuery: {
          category: 'acttemplate',
          url: target,
          pos: id,
        }, 
        isEdit
      }
    );
  }

  /**
   * 立即阅读，跳转书籍详情页
   */
  public goRead() {
    const {isEdit, id} = this.props;
    if(!isEdit) {
      const log = getLogInstance();
      log.sendLog('acttemplate1-16', {
        category: 'acttemplate',
        pos: id,
        bookId: id,
      });
      setTimeout(() => {
        if(isSnail()){
          location.href = `nesnailreader://bookdetail?bookId=${id}`
        }else{
          location.href = `https://du.163.com/share/book/${id}`
        }
      }, 300)
    }
  }



  public render() {
    // console.log('this.props', this.props);
    const { title, userDesc, bookDesc, bookData } = this.props;
    // console.log('bookData', bookData);
    return <Container>
      <div className="header">
        {
          <div className="title">{title ? title : bookData.title}</div>
        }
      </div> 
      {
        bookData ? <div className="share-read">
          <div className="content">
            <div className="words">
              <div className="user">
                <img className="avatar" src="https://lofter.lf127.net/1619146422555/snail.jpg" alt="avatar"/>
                <div className="info">
                  <div className="nickName">蜗小牛</div>
                  <div className="desc">{userDesc}</div>
                </div>
              </div>
              <div className="book">
                <div className="intro">
                  <div className="desc desc-book">{bookDesc || bookData.description}</div>
                </div>
              </div>
            </div>
            <img className="book-cover" src={bookData.imageUrl} alt=""/>
          </div>
          <div className="action">
            <div className="btn-1 left" onClick={this.goFindShareRead.bind(this)}>找人共读</div>
            <div className="btn-2" onClick={this.goRead.bind(this)}>立即阅读</div>
          </div>
        </div> : null
      }
    </Container>
  }
}