import React , {useState} from "react";
import axios from "axios";
import { Button } from "antd";
import "./list.css";

function FocusButton({is_watch , fontClass, starText, is_block , id , successFunc,notReset}){
  const [ isSpin , setIsSpin ] = useState(false);
  const [ watchFlag , setWatchFlag ] = useState(is_watch);
  // 关注和取消关注
  function focusFunc(flag){
    setIsSpin(true);
    axios({
      method: flag ? "delete" : "post",
      url: `/watchers/${flag ? "unfollow" : "follow"}.json`,
      params: {
        target_type: "user",
        id,
      },
    }).then((result) => {
      if (result && result.data.status === 0) {
        successFunc && successFunc();
        if(notReset){
          setWatchFlag(!watchFlag);
        }
      }
      setIsSpin(false);
    })
    .catch((error) => {setIsSpin(false);});
  };

  return (
    <Button type={watchFlag ? "default" : "primary"} ghost={!watchFlag} block={is_block} loading={isSpin} onClick={() => focusFunc(watchFlag)}>
      {watchFlag ? (
        <span className="">
          <i className="iconfont icon-shixing font-15 text-yellow mr-4"></i>
          <span className={fontClass || "font-12"}>已关注</span>
        </span>
      ) : (
          <span className="">
            <i className="iconfont icon-kongxing font-15"></i>
            <span className={fontClass}>{starText || "关注"}</span>
          </span>
        )}
    </Button>
  );
}

export default FocusButton;
