import { View, Text, Image, Swiper, SwiperItem } from "@tarojs/components";
import './fast_sleep.scss'
import { useSelector } from "react-redux";
import { useEffect, useState } from "react";
import NewButton, { NewButtonType } from "../base/new_button";
import { rpxToPx } from "@/utils/tools";
import { getThemeColor } from "@/features/health/hooks/health_hooks";
import NewTimePicker from "../base/new_timepicker";
import { IconCalendar } from "@/components/basic/Icons";
import dayjs from "dayjs";
import { MainColorType } from "@/context/themes/color";
import NewHeader, { NewHeaderType } from "../components/new_header";
import Card from "../components/card";
import FastSleepConsole from "../components/fast_sleep_console";
import { fastWithSleep } from "@/services/health";
import FastSleepCard from "../components/fast_sleep_card";
import FastSleepDetailCard from "../components/fast_sleep_detail_card";
import MainHistory from "@/features/health/MainHistory";

export default function FastSleep() {
    const health = useSelector((state: any) => state.health);
    const [time, setTime] = useState(dayjs().format('HH:mm'))
    const [count, setCount] = useState(0)

    const [loaded, setLoaded] = useState(false)
    const [data, setData] = useState<any>(null)
    const [current, setCurrent] = useState(0)

    useEffect(() => {

        let timer = setInterval(() => {
            setCount(count => count + 1)
        }, 1000)

        switch (health.fast_with_sleep.status) {
            case 'WFS':
            case 'OG2_NO1':
                setCurrent(0)
                break;
            case 'OG1':
                setCurrent(1)
                break;
            case 'OG2':
                setCurrent(2)
                break;
            case 'OG3':
                setCurrent(3)
                break;
        }

        getDatas()

        return () => {
            clearInterval(timer)
        }
    }, [])

    global.refreshFastSleep = () => {
        getDatas()
    }


    function getDatas() {
        fastWithSleep().then(res => {
            setLoaded(true)
            setData(res)
        })
    }

    if (!loaded) return <View />

    return <View className="page_container">
        <NewHeader type={NewHeaderType.left_subtitle}
            title="Fast with Sleep"
            subtitle="Tune Into Your Circadian Rhythm "
        />
        <Swiper indicatorColor='#999'
            indicatorActiveColor='#333'
            style={{ height: rpxToPx(344), marginBottom: 20, flexShrink: 0 }}
            onChange={e => setCurrent(e.detail.current)}
            current={current}
            indicatorDots>
            <SwiperItem>
                <Card>
                    <FastSleepCard step={0} data={data} />

                </Card>
            </SwiperItem>
            <SwiperItem>
                <Card>
                    <FastSleepCard step={1} data={data} />
                </Card>
            </SwiperItem>
            <SwiperItem>
                <Card>
                    <FastSleepCard step={2} data={data} />
                </Card>
            </SwiperItem>
            <SwiperItem>
                <Card>
                    <FastSleepCard step={3} data={data} />
                </Card>
            </SwiperItem>
        </Swiper>

        <FastSleepDetailCard data={data} />
        <FastSleepConsole step={current} data={data} />
        <MainHistory type='FAST,SLEEP' />
        {/* <NewButton type={NewButtonType.link} title="hello world" onClick={() => {

        }} />
        <NewButton type={NewButtonType.label} title="hello world" onClick={() => {

        }} />
        <NewButton type={NewButtonType.label} title="hello world" labelBorder onClick={() => {

        }} /> */}
    </View>
}