import React from "react";
import { View, Text, Button, Image } from "@tarojs/components";
import Taro from "@tarojs/taro";
import classnames from "classnames";
import { useUserInfo } from "@/store/userStore";
import { useEvaluate, EvaluateCallback } from "@/store/evaluateStore";
import { delay } from "@/utils";
import ArrwoRight from "@/static/ntrp/ntrp_arrow_right.svg";
import CloseIcon from "@/static/ntrp/ntrp_popup_close.svg";
import DocCopy from "@/static/ntrp/ntrp_doc_copy.svg";
import styles from "./index.module.scss";

function NtrpPopupGuide(props: {
  close: () => void;
  skipGuide: () => void;
  evaluateCallback: EvaluateCallback;
}) {
  const { close, skipGuide, evaluateCallback } = props;
  const userInfo = useUserInfo();
  const { setCallback } = useEvaluate();

  async function handleTest() {
    setCallback(evaluateCallback);
    Taro.navigateTo({
      url: `/other_pages/ntrp-evaluate/index?stage=test`,
    });
    await delay(1000);
    close();
  }
  return (
    <View className={styles.container} onClick={(e) => e.stopPropagation()}>
      <View className={styles.header}>
        <View className={styles.closeBtn} onClick={close}>
          <Image className={styles.closeIcon} src={CloseIcon} />
        </View>
      </View>
      <View className={styles.top}>
        <View className={styles.avatarWrap}>
          <View className={styles.avatar}>
            <Image
              className={styles.avatarUrl}
              src={userInfo.avatar_url}
              mode="aspectFit"
            />
          </View>
          {/* avatar side */}
          <View className={styles.addonImage}>
            <Image
              className={styles.docImage}
              src={DocCopy}
              mode="aspectFill"
            />
          </View>
        </View>
        <View className={styles.guideMsg}>
          <View className={styles.title}>
            <Text>快速测一测✏️</Text>
          </View>
          <View className={styles.title}>
            <Text>你的</Text>
            <Text className={styles.colorTip}> (</Text>
            <Text className={styles.strongTip}>NTRP</Text>
            <Text className={styles.colorTip}>) </Text>
            <Text>水平?</Text>
          </View>
        </View>
        <View className={styles.desc}>
          <Text>首次发布球局前，需完善 NTRP 水平信息</Text>
        </View>
      </View>
      <View className={styles.bottom}>
        <View className={styles.jump}>
          <Button
            className={classnames(styles.button, styles.primary)}
            onClick={handleTest}
          >
            <Text>快速测试</Text>
            <Image className={styles.jumpIcon} src={ArrwoRight} />
          </Button>
        </View>
        <View className={styles.direct}>
          <Button className={classnames(styles.button)} onClick={skipGuide}>
            <Text>我了解我的水平，无需测试</Text>
          </Button>
        </View>
      </View>
    </View>
  );
}

export default NtrpPopupGuide;