import { View, Text, Image } from "@tarojs/components";
import Tabbar from "@/components/navigation/TabBar";
import IndexItem from '@/features/trackTimeDuration/components/IndexItem';

import './Index.scss'
import { useDispatch, useSelector } from "react-redux";
import { useReady } from "@tarojs/taro";
import Taro from "@tarojs/taro";
import { getInfoSuccess } from "@/store/user";
import { clockHome, getClocks } from "@/services/trackTimeDuration";
import { updateScenario } from "@/store/time";
import { setConfigs } from "@/store/common";
import { setScenario } from "@/store/scenario";
import { useEffect, useState } from "react";
import { IconPlus, IconRadioCheck, IconRadioCross } from "@/components/basic/Icons";
import { ColorType } from "@/context/themes/color";

export default function Page() {
    const dispatch = useDispatch();
    global.dispatch = dispatch;
    const user = useSelector((state: any) => state.user);
    const time = useSelector((state: any) => state.time);
    const [showErrorPage, setErrorPage] = useState(false)
    const [data, setData] = useState(null)
    const [count, setCount] = useState(0)
    const [homeData, setHomeData] = useState(null)

    const [selIndex, setSelIndex] = useState(0)

    const [multiData, setMultiData] = useState([
        {
            title: '睡前断食',
            checked: false
        },
        {
            title: '睡眠中断食',
            checked: false
        },
        {
            title: '起床后断食',
            checked: false
        },
    ])

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

    useEffect(() => {
        // if (user.isLogin) {
            getCheckData()
        // }
    }, [user.isLogin, time.status])

    useReady(async () => {
        const userData = await getStorage('userData');
        if (userData) {
            dispatch(getInfoSuccess(JSON.parse(userData as string)) as any);
            // setTimeout(() => {
            //     // checkWXPubFollow()
            //     getCheckData()

            // }, 200)

        }

    })

    function getCheckData() {
        getClocks().then(res => {
            // setErrorPage(false)
            // setData(res as any)
            // dispatch(updateScenario((res as any).current_record))
            // dispatch(setConfigs((res as any).time_input_schema));
            // dispatch(setScenario((res as any).scenario));

            if ((res as any).theme_color) {
                global.fastColor = (res as any).theme_color.fast
                global.sleepColor = (res as any).theme_color.sleep
            }
        })

        clockHome().then(res => {
            setHomeData(res as any)
        })
    }

    async function getStorage(key: string) {
        try {
            const res = await Taro.getStorage({ key });
            return res.data;
        } catch {
            return '';
        }
    }
    if (!homeData) {
        return <View>
            <Tabbar index={0} />
        </View>
    }

    var timestamp = new Date().getTime()
    return <View className="index_container">
        <Text className="count">{count}</Text>
        <IndexItem type="FAST" data={(homeData as any).fast} time={timestamp} />
        <IndexItem type='SLEEP' data={(homeData as any).sleep} time={timestamp} />
        <Text className="discovery">探索</Text>
        <IndexItem type="FAST_SLEEP" data={(homeData as any).fast_sleep} time={timestamp} />
        <Tabbar index={0} />

        <View>
            <Text>Single Sel</Text>
            <View className={selIndex == 0 ? "single_check_sel" : "single_check_nor"} onClick={() => setSelIndex(0)}>
                <Text className={selIndex == 0 ? "single_check_text_sel" : "single_check_text_nor"}>睡前断食</Text>
                {
                    selIndex == 0 ? <Image src={require('@assets/images/check_black.png')} className="single_checked" /> :
                        <IconPlus color={ColorType.fast} />
                }
            </View>
            <View className={selIndex == 1 ? "single_check_sel" : "single_check_nor"} onClick={() => setSelIndex(1)}>
                <Text className={selIndex == 1 ? "single_check_text_sel" : "single_check_text_nor"}>睡眠中断食</Text>
                {
                    selIndex == 1 ? <Image src={require('@assets/images/check_black.png')} className="single_checked" /> :
                        <IconPlus color={ColorType.fast} />
                }
            </View>
            <View className={selIndex == 2 ? "single_check_sel" : "single_check_nor"} onClick={() => setSelIndex(2)}>
                <Text className={selIndex == 2 ? "single_check_text_sel" : "single_check_text_nor"}>起床后断食</Text>
                {
                    selIndex == 2 ? <Image src={require('@assets/images/check_black.png')} className="single_checked" /> :
                        <IconPlus color={ColorType.fast} />
                }
            </View>
        </View>

        <View style={{ marginTop: 50 }}>
            <Text>Multi Sel</Text>
            {
                multiData.map((item) => {
                    return <View className={item.checked ? "single_check_sel" : "single_check_nor"} onClick={() => {
                        item.checked = !item.checked
                        setMultiData(JSON.parse(JSON.stringify(multiData)))
                    }}>
                        <Text className={item.checked ? "single_check_text_sel" : "single_check_text_nor"}>{item.title}</Text>
                        {
                            item.checked ? <Image src={require('@assets/images/check_black.png')} className="single_checked" /> :
                                <IconPlus color={ColorType.fast} />
                        }
                    </View>
                })
            }
        </View>

        <View style={{ height: 100 }} />
    </View>
}