import { View, Text, Switch } from "@tarojs/components";
import './move_setting_reminder.scss'
import Cell from "../base/cell";
import { useEffect, useState } from "react";
import { createSchedule, getMoveSchedules } from "@/services/health";
import { getThemeColor } from "@/features/health/hooks/health_hooks";

export default function MoveSettingReminder() {
    const [selIndex, setSelIndex] = useState(-1)
    const [hours, setHours] = useState('')
    const [total, setTotal] = useState('')
    const [detail, setDetail] = useState<any>(null)

    useEffect(() => {
        getMoveSchedules().then(res => {
            setDetail(res)
            setHours((res as any).goal.hour)
            setTotal((res as any).goal.day)
        })
    }, [])

    if (!detail) return <View />

    return <View>
        <Text>打卡时刻表</Text>
        {
            detail.schedules.map((item, index) => {
                return <View key={index}>
                    <Cell className='demoCell' disable>
                        <View style={{ display: 'flex', flexDirection: 'column' }}>
                            <Text>{item.reminder_time}</Text>
                            <View>
                                <Text style={{ flex: 1 }}>check in for {item.time}-{item.end_time}</Text>
                                <Switch checked={item.reminder} color={getThemeColor('ACTIVE')} onChange={e => {
                        console.log(item)
                        createSchedule({
                            schedules: [{
                                id: item.id,
                                reminder: e.detail.value
                            }],
                        }).then(res => {
                            if (global.refreshWindow){
                                global.refreshWindow()
                            }
                            if (global.refreshSchedules){
                                global.refreshSchedules()
                            }
                            if (global.updateMove){
                                global.updateMove()
                            }
                        })
                    }}/>
                            </View>
                        </View>
                    </Cell>
                </View>
            })
        }

    </View>
}