import trackTimeService, { machine } from "@/store/trackTimeMachine";
import { View, Text, CoverView } from "@tarojs/components";
import { useEffect, useState } from "react";
import { TimeFormatter } from "@/utils/time_format";
import Rings, { BgRing, CurrentDot, RealRing, RingCommon } from './Rings';
import { getBgRing, getCommon, getDot, getReal, getTarget } from "../hooks/RingData";
import './Clock.scss'
import { ColorType } from "@/context/themes/color";
import { useSelector } from "react-redux";
import { jumpPage } from "../hooks/Common";
export default function Component(props: { showCoverView: boolean }) {
    const [checkData, setCheckData] = useState(null)
    const time = useSelector((state: any) => state.time);
    const user = useSelector((state: any) => state.user);
    const [showCover, setShowCover] = useState(props.showCoverView)

    const [smallCtx, setSmallCtx] = useState(null)
    const [bigCtx, setBigCtx] = useState(null)

    const [smallCanvas, setSmallCanvas] = useState(null)
    const [bigCanvas, setBigCanvas] = useState(null)

    useEffect(() => {
        if (!user.isLogin) {
            setCheckData(null)
        }
    }, [user.isLogin])

    useEffect(() => {
        if (time.status != '' && user.isLogin)
            setCheckData(time)
    }, [time.status, time.scenario, user.isLogin])

    useEffect(() => {
        setShowCover(props.showCoverView)
    }, [props.showCoverView])


    //外环
    function bigRing() {
        var common = getCommon(null, true)
        common.radius = 126;
        common.lineWidth = 28;
        var bgRing = getBgRing()
        var currentDot1;
        var realRing1;
        var targetBigRing1
        if (!checkData) {
            currentDot1 = getDot(null, true)
        }
        else {
            currentDot1 = getDot(time, true)

            targetBigRing1 = getTarget(time, true)
            targetBigRing1.color = global.fastColor ? global.fastColor + '66' : ColorType.fast + '66'//'rgba(170,255,0,0.4)'
            if (time.scenario == 'SLEEP') {
                targetBigRing1.color = global.sleepColor ? global.sleepColor + '66' : ColorType.sleep + '66'//'rgba(170,255,0,0.4)'
            }


            if (time.status == 'ONGOING') {
                realRing1 = getReal(time, true, false)
            }
            realRing1 = getReal(time, true, false)
        }



        return <Rings common={common} bgRing={bgRing} currentDot={currentDot1}
            targetRing={(!checkData || time.status == 'WAIT_FOR_START') ? null : targetBigRing1}
            realRing={(!checkData || time.status == 'WAIT_FOR_START') ? null : realRing1}
            ctx={bigCtx} setCtx={setBigCtx}
            canvas={bigCanvas} setCanvas={setBigCanvas}
            canvasId='bigRing' />
    }


    //内环
    // function smallRing() {
    //     // if (!checkData) return null
    //     if (time.scenario == 'FAST_SLEEP') {
    //         var common = getCommon(null, false)
    //         common.radius = 90;
    //         common.lineWidth = 28;
    //         var bgRing = getBgRing()
    //         var realRing = getReal(time, false, false)
    //         var currentDot = getDot(time, false)
    //         var targetRing = getTarget(time, false)
    //         targetRing.color = global.sleepColor ? global.sleepColor + '66' : ColorType.sleep + '66'//'rgba(0, 255, 255, 0.4)'
    //         // if (current_record.status == 'ONGOING2') {
    //         //     return <Rings common={common} bgRing={bgRing} realRing={realRing} currentDot={currentDot} targetRing={targetRing} canvasId='clock7' />
    //         // }

    //         //ongoing3时，睡眠点整理亮度降低
    //         if (time.status == 'ONGOING3') {
    //             currentDot.color = global.sleepColor ? global.sleepColor + '66' : ColorType.sleep + '66'
    //         }
    //         // return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId='clock8' />

    //         return <Rings common={common} bgRing={bgRing} currentDot={currentDot}
    //             realRing={time.status == 'ONGOING2' ? realRing : null}
    //             targetRing={time.status == 'ONGOING2' ? targetRing : null}
    //             canvasId='smallRing'
    //             canvas={smallCanvas} setCanvas={setSmallCanvas}
    //             ctx={smallCtx} setCtx={setSmallCtx}
    //         />
    //     }
    //     // return null;
    // }

    function smallRing() {
        // if (!checkData) return null
        // if (time.scenario == 'FAST_SLEEP') {
        var common = getCommon(null, false)
        common.radius = 90;
        common.lineWidth = 28;
        var bgRing = getBgRing()
        var realRing = time.scenario == 'FAST_SLEEP' ? getReal(time, false, false) : null
        var currentDot = time.scenario == 'FAST_SLEEP'?getDot(checkData ? time : null, false):null
        var targetRing = time.scenario == 'FAST_SLEEP' ? getTarget(time, false) : null
        if (targetRing) {
            targetRing.color = global.sleepColor ? global.sleepColor + '66' : ColorType.sleep + '66'//'rgba(0, 255, 255, 0.4)'
        }

        //ongoing3时，睡眠点整理亮度降低
        if (time.status == 'ONGOING3') {
            currentDot.color = global.sleepColor ? global.sleepColor + '66' : ColorType.sleep + '66'
        }

        return <Rings common={common} bgRing={bgRing} currentDot={currentDot}
            targetRing={time.status == 'ONGOING2' ? targetRing : null}
            realRing={time.status == 'ONGOING2' ? realRing : null}
            ctx={smallCtx} setCtx={setSmallCtx}
            canvas={smallCanvas} setCanvas={setSmallCanvas}
            canvasId='smallRing' />
        // }
        // return null;
    }

    function tapCover() {
        if (user.isLogin) {

        }
        else {
            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', null)
        }
    }

    return (
        <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%' }}>
            <View style={{ position: 'relative', zIndex: 1 }}>
                {
                    bigRing()
                }
                <View style={{
                    display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0,
                    opacity: (time.scenario == 'FAST_SLEEP' && user.isLogin) ? 1 : 0,
                    alignItems: 'center', justifyContent: 'center',
                }}>
                    {
                        smallRing()
                    }
                </View>
                <View style={{ display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }}>
                    {
                        !checkData && <Text className="clock_text" style={{ fontSize: 24, color: ColorType.fast }}>{TimeFormatter.getCurrentHourAndMinute()}</Text>
                    }
                    {
                        checkData && time.status == 'WAIT_FOR_START' && time.scenario == 'FAST_SLEEP' &&
                        <Text className="clock_text fast_sleep_text" style={{ fontSize: 24 }}>{TimeFormatter.getCurrentHourAndMinute()}</Text>
                    }
                    {
                        checkData && time.status == 'WAIT_FOR_START' && time.scenario != 'FAST_SLEEP' &&
                        <Text className="clock_text" style={{ color: time.scenario == 'FAST' ? ColorType.fast : ColorType.sleep, fontSize: 24 }}>{TimeFormatter.getCurrentHourAndMinute()}</Text>
                    }
                    {
                        checkData && time.status == 'ONGOING' && <Text className="clock_text" style={{ color: time.scenario == 'FAST' ? global.fastColor ? global.fastColor : ColorType.fast : global.sleepColor ? global.sleepColor : ColorType.sleep, fontSize: 32 }}>
                            {TimeFormatter.formateTimeNow(time.fast ?
                                time.fast.real_start_time :
                                time.sleep.real_start_time)}
                        </Text>
                    }
                    {
                        checkData && time.status == 'ONGOING1' && <Text className="clock_text" style={{ color: global.fastColor ? global.fastColor : ColorType.fast, fontSize: 32 }}>
                            {TimeFormatter.formateTimeNow(time.fast.real_start_time)}
                        </Text>
                    }
                    {
                        checkData && time.status == 'ONGOING2' && <View style={{ flexDirection: 'column', display: 'flex' }}>
                            <Text className="clock_text" style={{ color: global.fastColor ? global.fastColor : global.fastColor ? global.fastColor : ColorType.fast, fontSize: 32 }}>
                                {TimeFormatter.formateTimeNow(time.fast.real_start_time)}
                            </Text>
                            <Text className="clock_text" style={{ color: global.sleepColor ? global.sleepColor : ColorType.sleep, fontSize: 32 }}>
                                {TimeFormatter.formateTimeNow(time.sleep.real_start_time)}
                            </Text>
                        </View>
                    }
                    {
                        checkData && time.status == 'ONGOING3' && <Text>
                            <Text className="clock_text" style={{ color: global.fastColor ? global.fastColor : ColorType.fast, fontSize: 32 }}>
                                {TimeFormatter.formateTimeNow(time.fast.real_start_time)}
                            </Text>
                        </Text>
                    }
                </View>
                {
                    showCover && <CoverView style={{
                        display: 'flex', position: 'absolute',
                        left: 0, right: 0, top: 0, bottom: 0, backgroundColor: 'transparent'
                    }} />
                }
            </View>

        </View>
    )
}