import { View, ScrollView, Swiper, SwiperItem } from "@tarojs/components";
import './Clock.scss'
import { useEffect, useState } from "react";
import MainDayNightCard from "@/features/health/MainDayNightCard";
import MainFastEatCard from "@/features/health/MainFastEatCard";
import MainSleepActiveCard from "@/features/health/MainSleepActiveCard";
import TabBar from "@/components/navigation/TabBar";
import { rpxToPx } from "@/utils/tools";
import MainSwiper from "@/features/health/MainSwiper";
import MainConsole from "@/features/health/MainConsole";
import MainHistory from "@/features/health/MainHistory";
import { WindowType } from "@/utils/types";

export default function ClockNew() {
    const [count, setCount] = useState(0)
    const [scrollLeft, setScrollLeft] = useState(rpxToPx(750) * 0)
    const [type,setType] = useState(WindowType.day)


    useEffect(() => {
        setInterval(() => {
            setCount(index => index + 1)
        }, 1000)
    }, [])

    function tapScroll(index) {
        setScrollLeft(rpxToPx(750) * index)
    }

    function scroll(e) {
        console.log(e.detail.scrollLeft)
    }

    function pageChanged(index){

    }

    function typeChanged(str){

    }

    function detail() {
        return <View>
            <MainSwiper count={count} pageChanged={pageChanged} typeChanged={typeChanged}/>
            <MainConsole type={type}/>
            <MainHistory type={type}/>
            <View style={{height:200}}/>
        </View>
    }
    //https://blog.csdn.net/weixin_43525284/article/details/130182218
    return <View style={{flex:1}}>
        {
            process.env.TARO_ENV == 'weapp' ? detail() : <ScrollView style={{flex:1}}>
                {
                    detail()
                }
            </ScrollView>
        }
        {/* <View className="tabs">
            <View className="item" onClick={() => tapScroll(0)}> tab 0</View>
            <View className="item" onClick={() => tapScroll(1)}>tab 1</View>
            <View className="item" onClick={() => tapScroll(2)}>tab 2</View>
        </View>
        <ScrollView scrollX
            scrollLeft={scrollLeft}
            scrollWithAnimation={true}
            pagingEnabled={true}
            enableFlex
            onScroll={scroll}
            style={{ width: rpxToPx(750), display: 'flex', flexDirection: 'row', overflow: 'hidden' }}
            enhanced>
            <View style={{ display: 'flex', flexShrink: 0, width: rpxToPx(750) }}>
                <MainDayNightCard count={count} />
            </View>
            <View style={{ display: 'flex', flexShrink: 0, width: rpxToPx(750) }}>
                <MainFastEatCard count={count} />
            </View>

            <View style={{ display: 'flex', flexShrink: 0, width: rpxToPx(750) }}>
                <MainSleepActiveCard count={count} />
            </View>




        </ScrollView> */}
        <TabBar index={0} />
    </View>
}