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";
import CellFooter, { CellFooterType } from "../base/cell_footer";
import CellFooterText from "../base/cell_footer_text";
import Taro from "@tarojs/taro";

export default function GuideFull() {
    const systemInfo: any = Taro.getWindowInfo?Taro.getWindowInfo():Taro.getSystemInfoSync();
    const navigationBarHeight = systemInfo.statusBarHeight + 44;
    const user = useSelector((state: any) => state.user);

    const health = useSelector((state: any) => state.health);
    const [errors, setErrors] = useState<any>([])
    const [posting,setPosting] = useState(false)
    const [selItem, setSelItem] = useState<any>(null)
    const { t } = useTranslation()

    const dispatch = useDispatch()
    const selMode = 'SLEEP'
    useEffect(() => {
    }, [])

    function commit() {
        if (posting) return
        setPosting(true)
        createSchedule({
            schedules: health.schedules,
            op_page: 'SCHEDULE_FINISH_SETUP'
            // only_check: true
        }).then(res => {
            const data = {
                title: t('health.guide_done_title'),
                description: t('health.guide_done_desc'),
                current_window: (res as any).current_window
            }
            jumpPage('./post_result?type=schedule&data=' + JSON.stringify(data))
            if (global.refreshWindow) {
                global.refreshWindow()
            }
            setPosting(false)
        }).catch(e=>{
            setPosting(false)
        })


    }

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

    function items() {


        var array = JSON.parse(JSON.stringify(health.schedules))
        array.sort((a, b) => {
            return a.time.localeCompare(b.time);
        });
        return <Card>
            {
                array.map((obj, i) => {
                    return <ScheduleItem
                        index={i}
                        count={array.length}
                        key={i * 100}
                        obj={obj}
                        disable
                        showLine={i < array.length - 1}
                        errors={errors}
                        selMode={selMode}
                    />
                })
            }
        </Card>
    }
    return <View style={{ flex: 1, display: 'flex', flexDirection: 'column', height: '100vh' }}>
        <View style={{ height: navigationBarHeight, backgroundColor: MainColorType.g05,flexShrink:0 }} />
        <View className="navi-bar" style={{ height: navigationBarHeight, zIndex: 1000, backgroundColor: MainColorType.g05 }}>

            <View style={{
                position: 'absolute',
                left: 0,
                right: 0,
                bottom: 0,
                height: 44,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center'
            }}>
                <Image src={require('@assets/_health/navi_back.png')} style={{
                    position: 'absolute',
                    width: rpxToPx(92),
                    height: rpxToPx(64),
                    left: 0,
                    top: 22 - rpxToPx(32)
                }}
                    onClick={() => {
                        Taro.navigateBack()
                    }}
                />
                <Image src={user.avatar} mode="aspectFill" style={{
                    background: user.isLogin ? 'transparent' : '#fff',
                    width: rpxToPx(64),
                    height: rpxToPx(64),
                    borderRadius: rpxToPx(32)
                }} />
            </View>


        </View>
        <NewHeader type={NewHeaderType.center_subtitle} title={t('health.guide_end_title')} subtitle={t('health.guide_end_desc')} />
        {
            items()
        }
        <CellFooter type={CellFooterType.left}>
            <View style={{ display: 'flex', flexDirection: 'column' }}>
                <CellFooterText text={footerDesc()} />
            </View>
        </CellFooter>
        <View style={{ height: 200, flexShrink: 0 }} />
        <View style={{ flex: 1 }} />
        <View className="main_footer">
            <NewButton
                type={NewButtonType.fill}
                title={t('health.done')}
                color={MainColorType.fast}
                width={rpxToPx(646)}
                height={rpxToPx(96)}
                onClick={commit}
            />
        </View>
    </View>
}