import { View, Image } from "@tarojs/components";
import './long_full.scss'
import { useEffect, useState } from "react";
import Taro, { useRouter } from "@tarojs/taro";
import { joinDetail, joinHistory } from "@/services/friend";
import { MainColorType } from "@/context/themes/color";
import dayjs from "dayjs";
import { rpxToPx } from "@/utils/tools";
import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
import { IconArrow } from "@/components/basic/Icons";

let useRoute;
let useNavigation;
let scenario = '';
if (process.env.TARO_ENV == 'rn') {
    useRoute = require("@react-navigation/native").useRoute
    useNavigation = require("@react-navigation/native").useNavigation
}

export default function LongFull() {
    let router
    let navigation;
    if (useNavigation) {
        navigation = useNavigation()
    }

    if (process.env.TARO_ENV == 'rn') {
        router = useRoute()
    }
    else {
        router = useRouter()
    }
    const [users, setUsers] = useState<any>([])

    useEffect(() => {
        getDetail()
    }, [])

    function getDetail() {
        joinHistory(router.params.join_id).then(res => {
            setUsers((res as any).data)
        })
    }

    function goHome(item){
        jumpPage(`./home?uid=${item.id}`)
    }

    return <View>
        {
            users.map((item, index) => {
                return <View key={index} className="long_full_item" onClick={()=>goHome(item)}>
                    <Image className="full_item_avatar" src={item.avatar} />
                    <View className="h34 bold" style={{ color: MainColorType.link }}>{item.nickname}</View>
                    <View style={{ flex: 1 }} />
                    <View className="h20 g02">{dayjs(item.join_timestamp).format('M月D日 HH:mm加入打卡')}</View>
                    <IconArrow width={rpxToPx(34)} color={MainColorType.g02} />
                    <View className="border_footer_line" style={{left:rpxToPx(150)}}/>
                </View>
            })
        }
        {/* <Image className="main_avatar" src="" />
        <View className="h26 g02">累计获得 10888 次跟卡</View>
        <View className="member_group">
            <View>56人已跟卡</View>
            <View className="members"></View>
        </View> */}
    </View>
}