import React, { useState } from "react";
import { Pt80, HeadTab, ShowName, DivInline } from "../css/layout.jsx";
import UserIdentify from "./UserIdentify";
import UserAvatar from "./UserAvatar";
import UserBrief from "./UserBrief";
import StarUser from "./StarUser";


function head_user({ UserInfo }) {
  const [fansCount, setFansCount] = useState(0)
  const fans_count = (count) => {
    let new_fans_count = UserInfo.fans_count + count
    setFansCount(new_fans_count)
  }
  return (
    <div className="pr">
      <Pt80 className="educontent clearfix edu-txt-center">
        <DivInline>
          <HeadTab className="fl">
            <span>粉丝</span>
            {/* <a href={`/users/${UserInfo && UserInfo.login}/user_fanslist`}>
              {fansCount <= 0 ?  UserInfo && UserInfo.fans_count : fansCount}
            </a> */}
            <a href="javascript:void(0)">
              {fansCount <= 0 ?  UserInfo && UserInfo.fans_count : fansCount}
            </a>
          </HeadTab>
          {UserInfo && (
            <UserAvatar
              avatar={UserInfo.image_url}
              user_id={UserInfo.user_id}
              is_current_user={UserInfo.is_current_user}
              login={UserInfo.login}
            ></UserAvatar>
          )}
          <HeadTab className="fr">
            <span>关注</span>
            <a href="javascript:void(0)">
              {UserInfo && UserInfo.stars_count}
            </a>
            {/* <a href={`/users/${UserInfo && UserInfo.login}/user_watchlist`}>
              {UserInfo && UserInfo.stars_count}
            </a> */}
          </HeadTab>
          <ShowName>{UserInfo && UserInfo.username}</ShowName>
        </DivInline>
      </Pt80>
      {UserInfo && <UserIdentify user_info={UserInfo}></UserIdentify>}
      <div className="mt15 educontent clearfix edu-txt-center">
        {UserInfo && (
          <UserBrief
            brief={UserInfo.brief}
            login={UserInfo.login}
            is_current_user={UserInfo.is_current_user}
          ></UserBrief>
        )}
        {/* {UserInfo && !UserInfo.is_current_user && (
          <StarUser
            current_login={UserInfo.current_login}
            login={UserInfo.login}
            user_id={UserInfo.user_id}
            is_watched={UserInfo.is_watched}
            is_blocked={UserInfo.is_blocked}
            user_name={UserInfo.username}
            is_blocked_by={UserInfo.is_blocked_by}
            set_fans_count={fans_count}
            show_block={true}
          ></StarUser>
        )} */}
      </div>
    </div>
  );
}
export default head_user;
