import { View, Text, Switch } from "@tarojs/components";
import './move_setting_reminder.scss'
import './move_schedule.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";
import NewHeader, { NewHeaderType } from "../components/new_header";
import { IconNotification, IconNotificationOff } from "@/components/basic/Icons";
import { MainColorType } from "@/context/themes/color";
import { rpxToPx } from "@/utils/tools";
import StatusIndicator, { StatusType } from "../base/status_indicator";
import Layout from "@/components/layout/layout";
import { NaviBarTitleShowType, TemplateType } from "@/utils/types";

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

    useEffect(() => {
        getData()
    }, [])

    function getData() {
        getMoveSchedules().then(res => {
            setDetail(res)
            setHours((res as any).goal.hour)
            setTotal((res as any).goal.day)
        })
    }

    if (!detail) return <View />

    function detailContent() {
        return <View>
            <NewHeader type={NewHeaderType.left} title="Full Check In Schedule" />
            {
                detail.schedules.map((item, index) => {
                    return <View key={index}>
                        <View key={index} className="schedule_item">
                            {/* <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>

                            </View>
                        </View> */}
                            <View className="schedule_item_left">
                                <StatusIndicator type={StatusType.normal}
                                    color={MainColorType.active}
                                    text={'WAKING HOUR ' + (index + 1)} />
                                <View className="h34" style={{ marginLeft: rpxToPx(30) }}>Check in at {item.reminder_time}</View>
                                <Text className="h22" style={{ color: MainColorType.g02, marginTop: rpxToPx(12), marginLeft: rpxToPx(30) }}>
                                    {item.title}
                                </Text>
                                {/* <Text className="schedule_item_target">{item.real_steps}/{item.target_steps} steps</Text> */}
                            </View>
                            <View style={{ flex: 1 }} />
                            {
                                item.reminder ? <IconNotification color={MainColorType.g03} width={rpxToPx(28)} /> : <IconNotificationOff color={MainColorType.g03} width={rpxToPx(28)} />
                            }
                            <View style={{ width: rpxToPx(12) }} />
                            <Switch checked={item.reminder} color={getThemeColor('ACTIVE')} onChange={e => {
                                console.log(item)
                                createSchedule({
                                    schedules: [{
                                        id: item.id,
                                        reminder: e.detail.value
                                    }],
                                }).then(res => {
                                    getData()
                                    if (global.refreshWindow) {
                                        global.refreshWindow()
                                    }
                                    if (global.refreshSchedules) {
                                        global.refreshSchedules()
                                    }
                                    if (global.updateMove) {
                                        global.updateMove()
                                    }
                                })
                            }} />
                            {
                                index < detail.schedules.length - 1 && <View className="border_footer_line" style={{ left: rpxToPx(72) }} />
                            }
                        </View>
                    </View>
                })
            }

        </View>
    }

    return <Layout children={detailContent()}
        // title={router.params.title}
        header={null}
        secondPage={true}
        titleColor={'#fff'}
        title={'Full Check In Schedule'}
        type={TemplateType.customHeader}
        titleShowStyle={NaviBarTitleShowType.scrollToShow} />
}