import React, { Component } from "react";
import { Row, Col } from "antd";
import intl from "react-intl-universal";
import "./AvatarHoverCard.less";

class AvatarHoverCard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false
    };
  }

  componentDidMount() {
    this.props.getUserInfo({
      id: this.props.user_id
    });
  }

  render() {
    const { image, user_id, currentUser, userAvaHoverData } = this.props;
    const followed =
      userAvaHoverData[user_id] && userAvaHoverData[user_id].isFollowed;

    return (
      <div className="AvatarHoverCard" onClick={e => e.stopPropagation()}>
        {/* <Link to={`/bilingual/user/${user_id}`}> */}
        <div onClick={this.props.userAvaClick}>
          <Row type="flex" className="rowUser">
            <div
              className="avatar"
              style={{
                backgroundImage: `url(${image})`
              }}
            />
            <div className="nickname">
              {userAvaHoverData[user_id] && userAvaHoverData[user_id].nickname}
            </div>
          </Row>
        </div>
        {/* </Link> */}
        <div className="divider" />
        <Row type="flex" className="rowNum">
          <Col className="colFans">
            <div className="count">
              {userAvaHoverData[user_id] && userAvaHoverData[user_id].fans}
            </div>
            <div className="text">
              {intl.get("bilingually.fan", {
                ext:
                  userAvaHoverData[user_id] &&
                  userAvaHoverData[user_id].fans > 1
                    ? "s"
                    : ""
              })}
            </div>
          </Col>
          <Col className="hdivider" />
          <Col className="colFollow">
            <div className="count">
              {userAvaHoverData[user_id] && userAvaHoverData[user_id].followers}
            </div>
            <div className="text">
              {intl.get("bilingually.follow", {
                ext:
                  userAvaHoverData[user_id] &&
                  userAvaHoverData[user_id].followers > 1
                    ? "s"
                    : ""
              })}
            </div>
          </Col>
        </Row>
        {currentUser.user_id !== user_id && (
          <Row type="flex" className="rowBtn">
            {followed ? (
              <div
                className="unFollowBtn"
                onClick={e => {
                  e.stopPropagation();
                  this.props
                    .unFocus({
                      id: user_id
                    })
                    .then(() => {
                      this.props.getUserInfo({
                        id: user_id
                      });
                    });
                }}
              >
                {intl.get("bilingually.cancel_follow")}
              </div>
            ) : (
              <div
                className="followBtn"
                onClick={e => {
                  e.stopPropagation();
                  this.props.focus({ id: user_id }).then(() => {
                    this.props.getUserInfo({
                      id: user_id
                    });
                  });
                }}
              >
                {intl.get("bilingually.follow", { ext: "" })}
              </div>
            )}

            {/* 发私信按钮，暂时隐藏 */}
            {/* <div
            className={styles.privateMessageBtn}
            onClick={this.toggleShowModal}
          >
            发私信
          </div> */}
          </Row>
        )}
      </div>
    );
  }
}

export default AvatarHoverCard;