import { View, Text, Image } from "@tarojs/components";
import './guide.scss'
import '@/_health/pages/schedules.scss'
import NewHeader, { NewHeaderType } from "../components/new_header";
import { useEffect, useState } from "react";
import { createSchedule, getSchedules } from "@/services/health";
import { setSchedules } from "@/store/health";
import { useDispatch, useSelector } from "react-redux";
import Card from "../components/card";
import { rpxToPx } from "@/utils/tools";
import { getThemeColor } from "@/features/health/hooks/health_hooks";
import Modal from "@/components/layout/Modal.weapp";
import TimePicker from "@/features/common/TimePicker";
import NewButton, { NewButtonType } from "../base/new_button";
import { MainColorType } from "@/context/themes/color";
import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
import ScheduleItem from "../components/schedule_item";
import { useTranslation } from "react-i18next";

export default function GuideSleep() {
    const health = useSelector((state: any) => state.health);
    const [errors, setErrors] = useState<any>([])
    const [highlight, setHighlight] = useState(true)
    const [list, setList] = useState<any>(health.schedules)
    const { t } = useTranslation()
    const dispatch = useDispatch()
    const selMode = 'SLEEP'
    useEffect(() => {
        setTimeout(() => {
            setHighlight(false)
        }, 2000)
    }, [])

    function check(array, tapDone = false) {
        createSchedule({
            schedules: array,
            only_check: true,
            return_all: true,
            op_page: 'SCHEDULE_WALKTHROUGH_2', sort_by: 'EVENT'
        }).then(res => {

            if ((res as any).result) {
                dispatch(setSchedules((res as any).schedules))
                setErrors([])
                if (tapDone) {
                    jumpPage('./guide_eat')
                }
            }
            else {
                setList((res as any).schedules)
                setErrors((res as any).error_messages ? (res as any).error_messages : [])
            }
        })
    }

    function isDisable(obj) {
        if (obj.window == 'FAST' && !obj.is_conflict) {
            return true
        }
        return false
    }

    function footerTitle() {
        if (health.footer) {
            return health.footer.sleep.title
        }
        return ''
    }

    function footerDesc() {
        if (health.footer) {
            return health.footer.sleep.description
        }
        return ''
    }

    function items() {
        var items = list.filter(item => item.window == 'FAST' || item.window == 'SLEEP')
        return <Card>
            {
                errors.map((item1, index) => {
                    return <View key={index} className='error_tip'>{item1}</View>
                })
            }
            {
                items.map((obj, i) => {
                    return <ScheduleItem
                        key={i * 100}
                        obj={obj}
                        highlight={highlight}
                        showLine={i < items.length - 1}
                        errors={errors}
                        selMode={selMode}
                        disable={isDisable(obj)}
                        gray={isDisable(obj)}
                        days={obj.plus_days != 0 ? obj.plus_days : null}
                        onChange={(time) => {
                            var array = JSON.parse(JSON.stringify(list))
                            array.map(item => {
                                if (item.id == obj.id) {
                                    item.time = time
                                    item.op_ms = new Date().getTime()
                                }
                            })
                            setList(array)

                            check(array)
                        }}
                    />
                })
            }
        </Card>
    }
    return <View style={{ flex: 1, display: 'flex', flexDirection: 'column', height: '100vh' }}>
        <NewHeader type={NewHeaderType.center_subtitle} title={t('health.guide_1_title')} subtitle={t('health.guide_1_desc')} />
        {
            items()
        }
        <View className="cell_footer_title bold h24" style={{ color: MainColorType.g02 }}>{footerTitle()}</View>
        <View className="cell_footer_desc h24" style={{ color: MainColorType.g02 }}>{footerDesc()}</View>
        <View style={{ flex: 1 }} />
        <View className="main_footer">
            <NewButton
                type={NewButtonType.fill}
                title="下一步"
                disable={errors.length > 0}
                color={MainColorType.sleep}
                width={rpxToPx(646)}
                height={rpxToPx(96)}
                onClick={() => {
                    check(list, true)

                }}
            />
        </View>
    </View>
}