import { View, Text, Input } from "@tarojs/components";
import './move_setting_time.scss'
import Cell from "../base/cell";
import { useEffect, useState } from "react";
import { createSchedule, getMoveSchedules } from "@/services/health";
import { rpxToPx } from "@/utils/tools";
import NewHeader, { NewHeaderType } from "../components/new_header";
import NewButton, { NewButtonType } from "../base/new_button";
import StatusIndicator, { StatusType } from "../base/status_indicator";
import { MainColorType } from "@/context/themes/color";
import ConsoleCell from "../components/console_cell";
import Layout from "@/components/layout/layout";
import { NaviBarTitleShowType, TemplateType } from "@/utils/types";
import Card from "../components/card";
import { useTranslation } from "react-i18next";

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

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

    function getDatas() {
        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_subtitle}
                title={t('health.hour_step_goal')}
                subtitle={t('health.avg_total_steps',{avg:hours,total:total})}//{`平均 ${hours} 步，全天 ${total} 步`}
            />
            <Card>
                <View style={{ display: 'flex', flexDirection: 'column', width: rpxToPx(700) }}>
                    {
                        detail.schedules.map((item, index) => {
                            return <ConsoleCell key={index}
                                moveCell
                                status={<StatusIndicator
                                    type={StatusType.normal}
                                    text={t('health.waking_hour')+' ' + (index + 1)}
                                    color={MainColorType.active}
                                />
                                }
                                right={selIndex != index ? <Text className="h26" style={{ color: MainColorType.link }} onClick={() => {
                                    setSelIndex(index)
                                }}>{t('health.change_goal')}</Text> : null}
                                disable={true}
                                showLine={true}
                                fullLine={false}
                                description={`${item.time}-${item.end_time}`}
                                title={selIndex != index ? `Hit ${item.goal} Steps` : null}
                                titleComponent={selIndex == index ? <Input className='item_name h34' style={{ flex: 1, height: rpxToPx(46), marginLeft: rpxToPx(32) }}
                                    // value={item.goal}
                                    autoFocus={true}
                                    focus={true}
                                    type="number"
                                    // cursor={item.goal.length}
                                    onBlur={() => {
                                        setSelIndex(-1)
                                        createSchedule({
                                            schedules: [{
                                                id: item.id,
                                                goal: item.goal
                                            }],
                                        }).then(res => {
                                            if (global.refreshWindow) {
                                                global.refreshWindow()
                                            }
                                            if (global.refreshSchedules) {
                                                global.refreshSchedules()
                                            }
                                            if (global.updateMove) {
                                                global.updateMove()
                                            }
                                            getDatas()
                                        })
                                    }}
                                    onInput={(e) => {
                                        // item.goal = e.detail.value
                                        var obj = JSON.parse(JSON.stringify(detail))
                                        obj.schedules[index].goal = e.detail.value
                                        setDetail(obj)
                                    }} /> : null}
                            />
                        })
                    }
                </View>
            </Card>


        </View>
    }

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