import { View, Text } from "@tarojs/components";
import Buttons from '@components/Buttons';
import Texts from '@components/Texts';
import Rings from '@components/Rings';
import Footer from '@components/Footer';
import SingleSelect from '../../../components/SingleSelect';
import { ComponentStatus, TextType } from "@utils/types";
import { useTranslation } from 'react-i18next'

import './ChooseScenario.scss'
import { useState } from "react";
import { useReady } from "@tarojs/taro";
import Taro from "@tarojs/taro";
import { useDispatch, useSelector } from "react-redux";
import { setScenario, setScenarioName } from "@/store/scenario";
import { getPlans } from "@/services/trackTimeDuration";


export default function Component() {
    const { t } = useTranslation()
    const dispatch = useDispatch();
    const [selIndex,setSelIndex] = useState(0)
    const [scenarios,setScenarios] = useState<any[]>([])
    const selScenario = useSelector((state: any) => state.scenario);

    useReady(()=>{
        console.log(selScenario)
        if (selScenario) {
            if (selScenario.name == 'FAST_SLEEP'){
                setSelIndex(2)
            }
            else if (selScenario.name == 'SLEEP'){
                setSelIndex(1)
            }
            else {
                setSelIndex(0)
            }
        }
        getPlans().then(res=>{
            const data = res as { scenarios: any[] };
            setScenarios(data.scenarios)
        })
    })

    function next() {
        console.log(scenarios);
        // var scenario = scenarios[selIndex];
        // setScenario(scenario)
        Taro.navigateTo({
            url: '/pages/SetSchedule'
        })
    }

    function footerContent() {
        var style = {}
        switch (selIndex) {
            case 0:
                style = { backgroundColor: '#AAFF00' }
                break;
            case 1:
                style = { backgroundColor: '#00FFFF' }
                break;
            case 2:
                style = {
                    background: 'linear-gradient(to right, #AAFF00, #00FFFF)'
                  }
                break;
        }
        return <View>
            <Buttons title='Next' onClick={next} style={{...style,width:320}}/>
        </View>
    }

    function items() {
        const array: any[] = []
        array.push(
            <View className="item_row">
                <Rings radius={33} strokeWidth={8} color='#AAFF00' canvasId='0' />
                <View className="item_txt_bg">
                    <Text className="item_txt" style={{ color: '#AAFF00' }}>{t('page.choose_scenario.fast')}</Text>
                </View>
            </View>
        );
        array.push(
            <View className="item_row">
                <Rings radius={33} strokeWidth={8} color='#00FFFF' canvasId='1' />
                <View className="item_txt_bg">
                    <Text className="item_txt" style={{ color: '#00FFFF' }}>{t('page.choose_scenario.sleep')}</Text>
                </View>
            </View>
        )
        array.push(
            <View className="item_row">
                <View style={{ position: 'relative', zIndex: 1 }}>
                    <Rings radius={33} strokeWidth={8} color='#AAFF00' canvasId='3' />
                    <View style={{ display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }}>
                        <Rings radius={23} strokeWidth={6} color='#00FFFF' canvasId='4' />
                    </View>
                </View>
                <View className="item_txt_bg">
                    <Text className="item_txt" style={{ color: '#00FFFF' }}>{t('page.choose_scenario.fast_sleep')}</Text>
                </View>
            </View>
        )
        return array;
    }

    function handleItemSelect(index: number) {
        setSelIndex(index)
        dispatch(setScenario(scenarios[index]) as any)
        // dispatch(setScenarioName(scenarios[index].scenario) as any)
    }

    return <View className="container">
        <Texts text={t('page.choose_scenario.title')} type={TextType.primary}></Texts>
        <Texts text={t('page.choose_scenario.sub_title')} type={TextType.secondary}></Texts>
        <View style={{ height: 20 }} />
        <View style={{ position: 'relative', zIndex: 1 }}>
            <SingleSelect items={items()} itemSelect={handleItemSelect} selIndex={selIndex}/>
        </View>

        <Footer child={footerContent()} />
    </View>;
}