import { View, Text, Image, ScrollView } from "@tarojs/components";
import dayjs from "dayjs";
import img from "@/config/images";
import { formatNtrpDisplay } from "@/utils/helper";
import styles from "./index.module.scss";

// 参与者
export default function Participants(props) {
  const { detail = {}, handleJoinGame, handleViewUserInfo } = props;
  const participants = detail.participants || [];
  const {
    participant_count,
    max_participants,
    user_action_status = {},
    start_time,
  } = detail;
  const { can_join, can_pay, can_substitute, is_substituting, waiting_start } =
    user_action_status;
  const showApplicationEntry =
    [can_pay, can_substitute, is_substituting, waiting_start].every(
      (item) => !item
    ) &&
    can_join &&
    dayjs(start_time).isAfter(dayjs());
  const leftCount = max_participants - participant_count;
  return (
    <View className={styles["detail-page-content-participants"]}>
      <View className={styles["participants-title"]}>
        <Text>参与者</Text>
        <Text>·</Text>
        <Text>{leftCount > 0 ? `剩余空位 ${leftCount}` : "已满员"}</Text>
      </View>
      {participant_count > 0 || showApplicationEntry ? (
        <View className={styles["participants-list"]}>
          {/* application */}
          {showApplicationEntry && (
            <View
              className={styles["participants-list-application"]}
              onClick={() => {
                handleJoinGame();
              }}
            >
              <Image
                className={styles["participants-list-application-icon"]}
                src={img.ICON_DETAIL_APPLICATION_ADD}
              />
              <Text className={styles["participants-list-application-text"]}>
                申请加入
              </Text>
            </View>
          )}
          {/* participants list */}
          <ScrollView className={styles["participants-list-scroll"]} scrollX>
            <View
              className={styles["participants-list-scroll-content"]}
              style={{
                width: `${
                  participants.length * 103 + (participants.length - 1) * 8
                }px`,
              }}
            >
              {participants.map((participant) => {
                const {
                  is_organizer,
                  user: {
                    avatar_url,
                    nickname,
                    level,
                    ntrp_level,
                    id: participant_user_id,
                  },
                } = participant;
                const role = is_organizer ? "组织者" : "参与者";
                // 优先使用 ntrp_level，如果没有则使用 level
                const ntrpValue = ntrp_level || level;
                // 格式化显示 NTRP，如果没有值则显示"初学者"
                const displayNtrp = ntrpValue ? formatNtrpDisplay(ntrpValue) : "初学者";
                return (
                  <View
                    key={participant.id}
                    className={styles["participants-list-item"]}
                  >
                    <Image
                      className={styles["participants-list-item-avatar"]}
                      mode="aspectFill"
                      src={avatar_url}
                      onClick={handleViewUserInfo.bind(
                        null,
                        participant_user_id
                      )}
                    />
                    <Text className={styles["participants-list-item-name"]}>
                      {nickname || "未知"}
                    </Text>
                    <Text className={styles["participants-list-item-level"]}>
                      {displayNtrp}
                    </Text>
                    <Text className={styles["participants-list-item-role"]}>
                      {role}
                    </Text>
                  </View>
                );
              })}
            </View>
          </ScrollView>
        </View>
      ) : (
        ""
      )}
    </View>
  );
}