import { getActiveMoveDetail } from "@/services/health";
import { View, Text, Image } from "@tarojs/components";
import { useRouter } from "@tarojs/taro";
import { useEffect, useState } from "react";
import './move.scss'
import { getThemeColor } from "@/features/health/hooks/health_hooks";
import { rpxToPx } from "@/utils/tools";
import dayjs from "dayjs";
import NewHeader, { NewHeaderType } from "../components/new_header";
import NewButton, { NewButtonType } from "../base/new_button";
import { MainColorType } from "@/context/themes/color";
import ListFooter from "../components/list_footer";
import { IconSit, IconWalk } 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 MoveDetail() {
    let router
    let navigation;
    if (useNavigation) {
        navigation = useNavigation()
    }

    if (process.env.TARO_ENV == 'rn') {
        router = useRoute()
    }
    else {
        router = useRouter()
    }

    const [loaded, setLoaded] = useState(false)
    const [data, setData] = useState<any>(null)
    const [moreActive, setMoreActive] = useState(false)

    useEffect(() => {
        getActiveMoveDetail(router.params.id).then(res => {
            setLoaded(true)
            setData(res)
        })
    }, [])

    function summary() {
        return <View className="move_summary">

            <View className="summary_header">
                <Text className="h34 bold">Summary</Text>
                <View style={{ flex: 1 }} />
                {
                    data.last_updated && <Text style={{ color: '#b2b2b2', fontSize: 10, fontWeight: 'normal' }}>最近更新于 {dayjs(data.last_updated).format('HH:mm')}</Text>
                }

                <View className="border_footer_line" />
            </View>
            <View className="summary_content">
                <View className="summary_footer">
                    <View className="summary_footer_item">
                        <Text className="light_desc">Hours Sedentary</Text>
                        <Text style={{ fontWeight: 'bold', fontSize: rpxToPx(24) }}><Text style={{ fontSize: rpxToPx(34) }}>{data.stat.sedentary_hours}</Text> / {data.stat.waking_hours}</Text>
                    </View>
                    <View className="summary_footer_item">
                        <Text className="light_desc">Hours Active</Text>
                        <Text style={{ color: getThemeColor('ACTIVE'), fontWeight: 'bold', fontSize: rpxToPx(24) }}><Text style={{ fontSize: rpxToPx(34) }}>{data.stat.active_hours}</Text> / {data.stat.waking_hours}</Text>
                    </View>
                    <View className="summary_footer_item">
                        <Text className="light_desc">Hours Missed</Text>
                        <Text style={{ fontWeight: 'bold', fontSize: rpxToPx(24) }}><Text style={{ fontSize: rpxToPx(34) }}>{data.stat.missed_hours}</Text> / {data.stat.waking_hours}</Text>
                    </View>
                </View>
                <View className="summary_footer" style={{ marginTop: rpxToPx(48) }}>
                    <View className="summary_footer_item">
                        <Text className="light_desc">Total Steps</Text>
                        <Text style={{ fontWeight: 'bold', fontSize: rpxToPx(24) }}><Text style={{ fontSize: rpxToPx(34) }}>{data.stat.real_steps}</Text> / {data.stat.target_steps}</Text>
                    </View>
                    <View className="summary_footer_item">
                        <Text className="light_desc">Total Calories</Text>
                        <Text style={{ fontWeight: 'bold', fontSize: rpxToPx(24) }}><Text style={{ fontSize: rpxToPx(34) }}>{data.stat.real_calories}</Text> / {data.stat.target_calories}</Text>
                    </View>
                    <View className="summary_footer_item">
                        <Text className="light_desc">Total Distance</Text>
                        <Text style={{ fontWeight: 'bold', fontSize: rpxToPx(24) }}><Text style={{ fontSize: rpxToPx(34) }}>{data.stat.real_distance}</Text> / {data.stat.target_distance}</Text>
                    </View>
                </View>
            </View>

        </View>
    }

    function activeHour() {

        const hours = data.hours
        return <View className="summary">
            <View className="summary_header">
                <Text className="h34 bold">Hourly</Text>
                <View className="border_footer_line" />
            </View>
            <View className="summary_content2">
                {
                    hours.map((item, index) => {
                        return <View key={index}>
                            {
                                currentHistory(item)
                            }
                        </View>
                    })
                }
            </View>



        </View>
    }

    function currentHistory(item) {
        var start = item.hour
        var isYesterday = start > new Date().getHours()
        var end = start + 1
        start = (start + '').padStart(2, '0')
        end = (end + '').padStart(2, '0')
        return <View className="current_history_item">
            <View style={{ display: 'flex', flexDirection: 'column' }}>
                <Text className="h24" style={{ color: MainColorType.g02, lineHeight: rpxToPx(36) + 'px' }}>{start}:00-{end}:00</Text>
                {
                    item.is_extra && <Text style={{ color: getThemeColor('SLEEP') }}>is Extra</Text>
                }
                <Text className="h24 bold"><Text className="h34 bold">{item.real_steps}</Text> / {item.target_steps} steps</Text>
                <View style={{
                    height: rpxToPx(18), flexShrink: 0,

                }} />
            </View>

            {
                item.status == 'MISSED' && <Text className="missed">Missed</Text>
            }
            {
                item.status == 'SEDENTARY' && <IconSit width={rpxToPx(44)} color={MainColorType.g02}/>
            }
            {
                item.status == 'ACTIVE' && <IconWalk width={rpxToPx(44)} color={MainColorType.active}/>
            }
            <View className="border_footer_line" />
        </View>
    }

    if (!loaded) return <View />

    const date = data.start_date + ''
    return <View>
        <NewHeader type={NewHeaderType.left} title={date.substring(0, 4) + '年' + date.substring(4, 6) + '月' + date.substring(6, 8) + '日'} />
        {
            summary()
        }
        {
            activeHour()
        }
        <ListFooter noMore={true} />
    </View>
}