import React, { useState, useEffect } from "react";
import styles from "./index.module.scss";
import { useNavigate } from "react-router-dom";
import { getRankList, RankDescItem, saveScore } from "../../../utils/API";
interface ResultProps {
  timeLeft: number;
  rightCount: number;
}

const Result = ({ timeLeft, rightCount }: ResultProps) => {
  const navigate = useNavigate()
  const [nickname, setNickname] = useState("")
  const [phone, setPhone] = useState("")
  const [isShowTips, setIsShowTips] = useState(true)
  const exhausetime = 180 - timeLeft
  const [rankDesc, setRankDesc] = useState<RankDescItem[]>([])

  const handleInputChange = () => {
    if ((nickname.length > 5 || nickname.length === 0) || (phone.length > 20 || phone.length === 0)) {
      setIsShowTips(true)
    } else {
      setIsShowTips(false)
    }
  }

  const handleRank = () => {
    if (!isShowTips) {
      const meRank = rankDesc.find(i => i.phone === phone)

      // 自己在榜，优先判断分数，再到时间
      if (meRank && (meRank.score > rightCount * 10 && meRank.time < exhausetime)) {
        navigate("/rank", { state: { noRank: true } })
        return
      }

      saveScore({
        name: nickname,
        phone: phone,
        score: rightCount * 10,
        time: exhausetime
      }).then(() => {
        navigate("/rank", { state: { noRank: false, phone } })
      })
      return
    }
    if (isShowRank) {
      navigate("/rank", { state: { noRank: true } })
      return
    }
  }
  const [isShowRank, setIsShowRank] = useState(true)
  useEffect(() => {
    getRankList().then(res => {
      setRankDesc(res.data.data)
      let rankData = res.data.data
      setIsShowRank((rankData[rankData.length - 1].score > rightCount * 10) || (rankData[rankData.length - 1].score === rightCount * 10 && rankData[rankData.length - 1].time < exhausetime) ? true
        : false)
    })
  }, [exhausetime, rightCount])
  return (
    <div className={styles.infomation}>
      <div className="title">恭喜您！
      </div>
      <div className="content">
        共答对 <span>{rightCount}</span> 道题，耗时 <span>{exhausetime}</span> 秒。{isShowRank ? "很遗憾您未进入排行榜" : "恭喜您进入当前答题排行榜前十名！"}
      </div>
      <div className="from" style={{ display: isShowRank ? "none" : "flex" }}>
        <input value={nickname} onChange={(e) => setNickname(e.target.value)} onBlur={handleInputChange} type="text" placeholder="请输入昵称，不超过5个字" />
        <input value={phone} onChange={(e) => setPhone(e.target.value)} onBlur={handleInputChange} type="text" placeholder="请输入联系方式，不超过20个字" />
      </div>
      <div className="content2">
        游戏规则：答对更多题目耗时更少的前五名 将在展览结束后赠送文创书签纪念品。
      </div>
      <div className="tips" style={{ display: isShowTips && !isShowRank ? "block" : "none" }}>您未填写昵称和联系方式，无法参与此次活动</div>
      <div className="tips" style={{ display: !isShowTips && !isShowRank ? "block" : "none" }}>点击查看排行榜参与排名</div>
      <div className="btn-group">
        <div className={isShowRank ? "item" : "backHome"} onClick={() => navigate("/")}>返回首页</div>
        <div className="item" onClick={handleRank}>查看排行榜</div>
      </div>
      <div className="back" onClick={() => navigate("/")}><img src={require("../../../assets/img/back.png")} alt="" /></div>

    </div >
  );
};

export default Result;
