import { View, Text } from "@tarojs/components";
import './active_plan.scss'
import { useRouter } from "@tarojs/taro";
import { useEffect, useState } from "react";
import { getThemeColor } from "@/features/health/hooks/health_hooks";
import Modal from "@/components/layout/Modal.weapp";
import AddLabel from "../components/add_label";
import { getLabelsEvent, getSchedules } from "@/services/health";
import { useSelector } from "react-redux";
import Taro from "@tarojs/taro";

let useRoute;
let useNavigation;
let scenario = '';
if (process.env.TARO_ENV == 'rn') {
    useRoute = require("@react-navigation/native").useRoute
    useNavigation = require("@react-navigation/native").useNavigation
}

export default function ActivePlan() {

    let router
    let navigation;
    if (useNavigation) {
        navigation = useNavigation()
    }

    if (process.env.TARO_ENV == 'rn') {
        router = useRoute()
    }
    else {
        router = useRouter()
    }

    const [schedule, setSchedule] = useState(JSON.parse(router.params.schedule))
    const [labels, setLabels] = useState<any>([])
    const [showModal, setShowModal] = useState(false)
    const health = useSelector((state: any) => state.health);
    const [list,setList] = useState<any>([])

    useEffect(() => {
        getLabelsEvent({ window: health.mode }).then(res => {
            setLabels((res as any).labels)
        })

        getDatas()
    }, [])

    function getDatas(){
        getSchedules({ window: health.mode }).then(res => {
            setList((res as any).data)
        })
    }

    function tapEdit() {
        setShowModal(true)
    }

    return <View style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
        <Text>Plan my daily life</Text>
        <Text>Header: List top 3 activities that matter most to me/I want to practice to every day</Text>
        <View className="plan_item" onClick={tapEdit}>
            <Text>1</Text>
            <Text style={{ flex: 1 }}>{schedule.title}</Text>
            <Text style={{ color: getThemeColor('ACTIVE') }}>Tap to customize</Text>
        </View>

        {
            showModal && <Modal testInfo={null}
                dismiss={() => {
                    setShowModal(false)
                }}
                confirm={() => { }}>
                <AddLabel labels={labels} defaultValue={schedule.title} disMiss={()=>{
                    setShowModal(false)
                    // getDatas()
                    Taro.navigateBack()
                }}/>
            </Modal>
        }
    </View>
}