import { MainColorType } from "@/context/themes/color";
import { followUser, getMyFollowers, getMyFollowings, getMyFriends } from "@/services/friend";
import { View, Image, Text, ScrollView } from "@tarojs/components";
import { useEffect, useState } from "react";
import './relation.scss'
import NewButton, { NewButtonType } from "@/_health/base/new_button";
import { rpxToPx } from "@/utils/tools";
import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
import { IconArrow } from "@/components/basic/Icons";
import Taro from "@tarojs/taro";
import NoRecord from "@/_health/components/no_record";

export default function Relation() {
    const [count, setCount] = useState(0)
    const [count2, setCount2] = useState(0)
    const [count3, setCount3] = useState(0)
    const [friends, setFriends] = useState<any>([])
    const [followers, setFollowers] = useState<any>([])
    const [followings, setFollowings] = useState<any>([])
    const [index, setIndex] = useState(0)

    const [list, setList] = useState<any>([])
    const [loaded, setLoaded] = useState(false)
    const [page, setPage] = useState(1)
    const [isPulling, setIsPulling] = useState(false)
    const [isLoading, setIsLoading] = useState(false)
    const [total, setTotal] = useState(-1)

    useEffect(() => {
        // getRelation()
        // getFollowers()
        // getFollowings()

        Taro.eventCenter.on('followUser', listenFollowUser)
        Taro.eventCenter.on('unfollowUser', listenUnfollowUser)

        setPage(1)
        getList(1)

        return () => {
            // Taro.eventCenter.off('followUser')
            // Taro.eventCenter.off('unfollowUser')
        }
    }, [])

    useEffect(() => {
        setPage(1)
        getList(1)
    }, [index])

    function getList(i) {
        setPage(i)
        if (index == 0) {
            getRelation(i)
        }
        else if (index == 1) {
            getFollowings(i)
        }
        else {
            getFollowers(i)
        }
    }

    function onRefresh() {
        setIsPulling(true)
        setPage(1)
        getList(1)
    }

    function more() {
        if (isLoading) return
        if (total == list.length) return
        var i = page + 1
        getList(i)
    }



    function listenFollowUser(e) {
        console.log('follow user', e)
        // getRelation()
        // getFollowers()
        // getFollowings()
        getList(1)
    }

    function listenUnfollowUser(e) {
        console.log('unfollow user', e)
        // getRelation()
        // getFollowers()
        // getFollowings()
        getList(1)
    }

    function getRelation(i) {
        setPage(i)
        setIsLoading(true)
        getMyFriends({
            page: i,
            limit: 20
        }).then(res => {
            setIsLoading(false)
            setLoaded(true)
            setIsPulling(false)
            setCount((res as any).total)
            // setFriends((res as any).data)
            if (i == 1) {
                setList((res as any).data)
            }
            else {
                setList([...list, ...(res as any).data])
            }
        }).catch(e => {
            setIsLoading(false)
            setLoaded(true)
            setIsPulling(false)
        })
    }
    function getFollowers(i) {
        setPage(i)
        setIsLoading(true)
        getMyFollowers({
            page: i,
            limit: 20
        }).then(res => {
            setIsLoading(false)
            setLoaded(true)
            setIsPulling(false)
            setCount((res as any).total)
            // setFollowers((res as any).data)
            if (i == 1) {
                setList((res as any).data)
            }
            else {
                setList([...list, ...(res as any).data])
            }
        }).catch(e => {
            setIsLoading(false)
            setLoaded(true)
            setIsPulling(false)
        })
    }
    function getFollowings(i) {
        setPage(i)
        setIsLoading(true)
        getMyFollowings({
            page: i,
            limit: 20
        }).then(res => {
            setIsLoading(false)
            setLoaded(true)
            setIsPulling(false)
            setCount((res as any).total)
            // setFollowings((res as any).data)
            if (i == 1) {
                setList((res as any).data)
            }
            else {
                setList([...list, ...(res as any).data])
            }
        }).catch(e => {
            setIsLoading(false)
            setLoaded(true)
            setIsPulling(false)
        })
    }

    function friendsList() {
        return <View>
            {/* <View>好友数量{count}</View> */}
            {
                friends.map((item, index) => {
                    return followItem(item, index * 1000)
                })
            }
        </View>
    }

    function followerList() {
        return <View>
            {/* <View>我的关注{count2}</View> */}
            {
                followers.map((item, index) => {
                    return followItem(item, index * 1000)
                })
            }
        </View>
    }

    function followingList() {
        return <View>
            {/* <View>我的粉丝{count3}</View> */}
            {
                followings.map((item, index) => {
                    return followItem(item, index)
                })
            }
        </View>
    }

    function userList() {
        return <View>
            {/* <View>我的粉丝{count3}</View> */}
            {
                list.map((item, index) => {
                    return followItem(item, index)
                })
            }
        </View>
    }



    function tapFollow(item) {
        var params: any = {
            follow_origin: 'WECHAT_PRIVATE_CHAT',
            user_id: item.id,
        }
        followUser(params).then(res => {
            // getProfile()
            Taro.eventCenter.trigger('followUser', item.id)
            debugger
        })
    }

    function followItem(item, index) {
        return <View key={index} className="relation_item" onClick={() => {
            jumpPage('./home?uid=' + item.id)
        }}>
            <Image src={item.avatar} className="relation_avatar" />
            <Text className="h34" style={{ color: MainColorType.link, flex: 1 }}>{item.nickname}</Text>
            {/* <Text>{item.relation}</Text> */}
            {
                item.relation == 'FRIEND' && <Text className="h30 g02">Friend</Text>
            }
            {
                item.relation == 'FOLLOWING' && <Text className="h30 g02">Following</Text>
            }
            {
                item.relation == 'FOLLOWER' && <NewButton
                    title="Follow"
                    type={NewButtonType.alpha}
                    color={MainColorType.blue}
                    width={rpxToPx(136)}
                    height={rpxToPx(72)}
                    onClick={() => {
                        tapFollow(item)
                    }}
                />
            }
            <IconArrow width={rpxToPx(34)} color={MainColorType.g02} />
            <View className="border_footer_line" style={{left:rpxToPx(150)}}/>
        </View>
    }

    function onScroll() {

    }

    // if (loaded && list.length == 0)
    //     return <NoRecord />

    return <ScrollView style='height:100vh'
        enableBackToTop
        scrollY={true}
        refresherEnabled={true}
        upperThreshold={70}
        lowerThreshold={140}
        refresherBackground={MainColorType.g05}
        onRefresherRefresh={onRefresh}
        refresherTriggered={isPulling}
        onScroll={onScroll}
        onScrollToUpper={() => {

        }}
        onScrollToLower={more}
    ><View >
            <View style={{ display: 'flex', flexDirection: 'row', height: 50 }}>
                <View style={{ flex: 1, color: index == 0 ? '#000' : MainColorType.g02, textAlign: 'center' }} onClick={() => { setIndex(0) }}>搭子</View>
                <View style={{ flex: 1, color: index == 1 ? '#000' : MainColorType.g02, textAlign: 'center' }} onClick={() => { setIndex(1) }}>关注</View>
                <View style={{ flex: 1, color: index == 2 ? '#000' : MainColorType.g02, textAlign: 'center' }} onClick={() => { setIndex(2) }}>粉丝</View>
            </View>
            {
                userList()
            }
            {
                loaded && list.length == 0 && <NoRecord />
            }

            {/* {
            index == 0 && friendsList()
        }
        {
            index == 1 && followingList()
        }
        {
            index == 2 && followerList()
        } */}
        </View>
    </ScrollView>

}