import { MainColorType } from "@/context/themes/color";
import { View, Text, Image, ScrollView } from "@tarojs/components";
import './long_card.scss'
import { rpxToPx } from "@/utils/tools";
import ShareBtn from "@/components/basic/ShareBtn";
import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
import { useDispatch, useSelector } from "react-redux";
import { getScenario } from "@/features/health/hooks/health_hooks";
import { setFollow, setJoinData, setJoinTitle } from "@/store/long";
import Taro from "@tarojs/taro";
import { useTranslation } from "react-i18next";
import { IconArrow } from "@/components/basic/Icons";

export default function LongCard(props: { join?: any, user?: any, hideJoin?: boolean, share?: any, title?: string, isFeedItem?: boolean }) {
    const { status, key, from, window } = props.join
    const health = useSelector((state: any) => state.health);
    const user = useSelector((state: any) => state.user);
    const long = useSelector((state: any) => state.long);
    const dispatch = useDispatch()
    const { t } = useTranslation()
    let type = 0
    function join(e) {
        if (process.env.TARO_ENV == 'weapp') {
            e.stopPropagation()
        }
        if (props.user) {
            dispatch(setFollow(props.user))
        }
        if (props.title) {
            dispatch(setJoinTitle(props.title))
        }
        dispatch(setJoinData(props.join))
        if (!user.isLogin) {
            jumpPage('/_account/pages/ChooseAuth')
            return
        }

        if (window == 'ACTIVE' || window == 'EAT') {
            jumpPage(`/_record/pages/log_record?scenario=${window == 'EAT' ? 'MEAL' : 'ACTIVITY'}&join_id=${key}`)
            // jumpPage(`/_health/pages/add_moment?join_id=${key}&is_temp=${true}&window=${window}&title=${props.title ?? long.title}`)
        }
        else {
            if (window == 'FAST') {
                // if (getScenario(health.windows, 'FAST').status == 'WFS') {
                //     //jumpPage(`/_health/pages/log_time?index=${health.mode == 'FAST' ? 0 : 1}&single=1&is_start=1&window=${health.mode}&op_page=${health.mode == 'FAST' ? 'HOME_FAST' : 'HOME_SLEEP'}`)
                //     jumpPage(`/_health/pages/log_time?join_id=${key}&index=0&single=1&is_start=1&window=${window}`)
                // }
                // else {
                //     //jumpPage(`/_health/pages/log_time?type=home&index=${health.mode == 'FAST' ? 3 : 2}&single=${sceniaro.status == 'OG' ? 1 : 0}&is_start=0&window=${health.mode}&op_page=${health.mode == 'FAST' ? 'HOME_FAST' : 'HOME_SLEEP'}`)
                //     jumpPage(`/_health/pages/log_time?join_id=${key}&index=3&single=1&is_start=0&window=${window}`)
                // }
                jumpPage(`/_record/pages/time_record?scenario=${window}&join_id=${key}`)
            }
            else if (window == 'SLEEP') {
                jumpPage(`/_record/pages/time_record?scenario=${window}&join_id=${key}`)
                // if (getScenario(health.windows, 'SLEEP').status == 'WFS') {
                //     //jumpPage(`/_health/pages/log_time?index=${health.mode == 'FAST' ? 0 : 1}&single=1&is_start=1&window=${health.mode}&op_page=${health.mode == 'FAST' ? 'HOME_FAST' : 'HOME_SLEEP'}`)
                //     jumpPage(`/_health/pages/log_time?join_id=${key}&index=1&single=1&is_start=1&window=${window}`)
                // }
                // else {
                //     //jumpPage(`/_health/pages/log_time?type=home&index=${health.mode == 'FAST' ? 3 : 2}&single=${sceniaro.status == 'OG' ? 1 : 0}&is_start=0&window=${health.mode}&op_page=${health.mode == 'FAST' ? 'HOME_FAST' : 'HOME_SLEEP'}`)
                //     jumpPage(`/_health/pages/log_time?join_id=${key}&index=2&single=1&is_start=0&window=${window}`)
                // }
            }

        }


    }

    function goDetail() {
        if (!user.isLogin) {
            jumpPage('/_account/pages/ChooseAuth')
            return
        }
        if (props.user) {
            dispatch(setFollow(props.user))
        }
        if (props.title) {
            dispatch(setJoinTitle(props.title))
        }
        dispatch(setJoinData(props.join))
        jumpPage(`/_moment/pages/long_detail?join_id=${key}&window=${window}&status=${status}`)
    }

    function share() {
        // global.join_id = key
        if (props.share) {
            props.share()
        }
        // if (props.isFeedItem){
        //     Taro.eventCenter.trigger('moment_share',{

        //     })
        // }
    }

    function users() {
        return <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
            {
                props.join.users.map((item, index) => {
                    // if (index > 4) return
                    return <Image className="long_avatar" mode="aspectFill" style={{
                        zIndex: 10 - index,
                        marginLeft: index == 0 ? 0 : -rpxToPx(20)
                    }} src={item.avatar} key={index} />
                })
            }
            {/* <View className="long_avatar"></View> */}
            {/* <View className="h26" style={{ marginLeft: rpxToPx(6) }}>{props.join.users.length > 5 ? `+${props.join.users.length - 5} more ` : ''}</View> */}
        </View>
    }

    if (status == 'JOIN')
        return <View onClick={goDetail} style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', marginTop: rpxToPx(24) }}>
            {
                (props.join && props.join.user_count == 0) && <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
                    <Image className="long_avatar" mode="aspectFill" style={{
                        marginRight: rpxToPx(6)
                    }} src={props.join.user.avatar} />

                </View>
            }

            {
                props.join && props.join.user_count > 0 && users()
            }
            <View className="h24">在跟卡</View>
            <IconArrow width={rpxToPx(24)} color={MainColorType.g02}/>
        </View>

    if (status == 'SHARE') {
        return <View />
    }

    return <View />
}