import React, { useEffect, useState } from "react";
import axios from 'axios';
import { setSeoMeta } from 'educoder';

function Badge(props) {
  const { match, history } = props;
  const { projectsId, owner, type } = match.params;

  if (!["watch.svg", "star.svg", "fork.svg"].includes(type)) {
    history.push('/nopage');
  }

  // 可以注释请求后，使用mock数据测试不同数值的场景
  // {
  //   watchers_count: 10,
  //   praises_count: 0,
  //   forked_count: 1200,
  // }
  const [projectDetail, setProjectDetail] = useState();
  const [text, setText] = useState("");

  // 查询项目详情，获取三种数值
  useEffect(() => {
    const url = `/${owner}/${projectsId}/detail.json`;
    axios.get(url).then((result) => {
      if (result && result.data) {
        if (result.data.status === 404) {
          this.props.history.push('/nopage');
        } else {
          setProjectDetail(result.data);
          // seo优化设置
          let keyWords = `${owner},${projectsId},${result.data.author.name},`;
          let title = `${owner}/${projectsId}${result.data.description ? '：' + result.data.description : ''}`;
          setSeoMeta(keyWords, title, result.data.description, `/${owner}/${projectsId}`, owner, projectsId);
        }
      }
    }).catch((error) => { })
  }, [projectsId, owner]);

  useEffect(() => {
    if (projectDetail) {
      if (type === "watch.svg") {
        setText(`${coutTranslate(projectDetail.watchers_count)} 关注数`);
      } else if (type === "star.svg") {
        setText(`${coutTranslate(projectDetail.praises_count)} 点赞数`);
      } else if (type === "fork.svg") {
        setText(`${coutTranslate(projectDetail.forked_count)} Fork数`);
      }
    }
  }, [type, projectDetail]);

  function coutTranslate(num) {
    if (num < 1000) {
      return num;
    } else if (num >= 1000 & num < 10000) {
      return (num / 1000).toFixed(1) + 'k';
    } else {
      return (num / 1000).toFixed(0) + 'k';
    }
  }

  return <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="148" height="44" viewBox="0 0 148 44">
    <defs>
      <filter id="矩形_234" x="0" y="0" width="148" height="44" filterUnits="userSpaceOnUse">
        <feOffset input="SourceAlpha" />
        <feGaussianBlur stdDeviation="3" result="blur" />
        <feFlood floodColor="#0c1a75" floodOpacity="0.161" />
        <feComposite operator="in" in2="blur" />
        <feComposite in="SourceGraphic" />
      </filter>
      <filter id="矩形_235" x="0" y="0" width="148" height="44" filterUnits="userSpaceOnUse">
        <feOffset input="SourceAlpha" />
        <feGaussianBlur stdDeviation="3" result="blur-2" />
        <feFlood floodColor="#445a64" floodOpacity="0.161" />
        <feComposite operator="in" in2="blur-2" />
        <feComposite in="SourceGraphic" />
      </filter>
      <linearGradient id="linear-gradient" x1="0.494" y1="-0.055" x2="1.494" y2="-0.055" gradientUnits="objectBoundingBox">
        <stop offset="0" stopColor="#6dffff" />
        <stop offset="1" stopColor="#0080ff" />
      </linearGradient>
    </defs>
    <g id="组_1758" data-name="组 1758" transform="translate(-1468 -507)">
      <g transform="matrix(1, 0, 0, 1, 1468, 507)" filter="url(#矩形_234)">
        <path id="矩形_234-2" data-name="矩形 234" d="M0,0H126a4,4,0,0,1,4,4V22a4,4,0,0,1-4,4H0a0,0,0,0,1,0,0V0A0,0,0,0,1,0,0Z" transform="translate(9 9)" fill="#fff" />
      </g>
      <g transform="matrix(1, 0, 0, 1, 1468, 507)" filter="url(#矩形_235)">
        <path id="矩形_235-2" data-name="矩形 235" d="M4,0H42a0,0,0,0,1,0,0V26a0,0,0,0,1,0,0H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0Z" transform="translate(9 9)" fill="#2b2b2b" />
        <text xmlns="http://www.w3.org/2000/svg" fill="#000"
        // svg文字的长度根据文字长短来决定，fork的额外减少1.5的系数；如果上千，额外减少0.5的系数
          textLength={80 - 10 * (7.5 - (text.indexOf("Fork") > -1 ? (text.length - 1.5) : text.length) + (text.includes('k ') && 0.5))}
          x={64 + 6 * (7.5 - (text.indexOf("Fork") > -1 ? (text.length - 1.5) : text.length) + (text.includes('k ') && 0.5))}
          y="30" lengthAdjust="spacing" transform="scale(.9)" weight="bold">
          {text}
        </text>
      </g>
      <g id="图层_2" data-name="图层 2" transform="translate(1484 520)">
        <g id="图层_1" data-name="图层 1">
          <path id="路径_3357" data-name="路径 3357" d="M20.6,5.477l-.75-1.023-.658.329v8.211l.546.288v-.911l.862,1.395.7.109V3.9l-.7.27Zm-15.462,8.4,1.559-.78V4.676L5.139,3.9Zm10.7,1.063,1.4.836V1.559l-1.4.836ZM13.827,0H11.878V17.764h2.984V16.008H13.827ZM7.51,3.683l.771.285V15.756l1.41-.729V4.578l.755.271V3.258L7.51,1.559ZM0,13.271l3.39-1.717V8.32L1.78,8.155V9.292h.645v1.1l-1.109.5V7.4L3.4,7.779V6.451L0,5.329ZM25.1,9.257l2.5-3.928-1.864.2L24.5,7.177V6.086l-1.37.329V12.32l1.37.286V11.475l1.329,1.684,2.138.107Z" fillRule="evenodd" fill="url(#linear-gradient)" />
        </g>
      </g>
    </g>
  </svg>


}

export default Badge;