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 { setFooter, 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 GuideFast() {
    const systemInfo: any = Taro.getWindowInfo?Taro.getWindowInfo():Taro.getSystemInfoSync();
    const navigationBarHeight = systemInfo.statusBarHeight + 44;
    const user = useSelector((state: any) => state.user);

    const [loaded, setLoaded] = useState(false)
    const health = useSelector((state: any) => state.health);

    const [errors, setErrors] = useState<any>([])
    const [highlight, setHighlight] = useState(true)

    const [selItem, setSelItem] = useState<any>(null)
    const [showTimePicker, setShowTimePicker] = useState(false)
    const { t } = useTranslation()
    const dispatch = useDispatch()
    const selMode = 'FAST'
    useEffect(() => {
        getSchedules({ window: '', sort_by: 'EVENT' }).then(res => {
            dispatch(setSchedules((res as any).data))
            dispatch(setFooter((res as any).footer))
            setLoaded(true)
            setTimeout(() => {
                setHighlight(false)
            }, 2000)
        })
    }, [])

    function modalContent() {
        const strTime = selItem.time

        var title = selItem.title
        var color = getThemeColor(selItem.window)

        return <TimePicker time={strTime}
            color={color}
            title={title}
            confirm={(e) => {
                // selItem.time = e
                setSelItem(selItem)
                setShowTimePicker(false)
                var array = JSON.parse(JSON.stringify(health.schedules))
                array.map(item => {
                    if (item.id == selItem.id) {
                        item.time = e
                        item.op_ms = new Date().getTime()
                    }
                })
                dispatch(setSchedules(array))

                check(array)
                // var array = JSON.parse(JSON.stringify(list))
                // array[selIndex].time = e
                // setList(array)
                // checkData(array)
            }}
            cancel={() => {
                setShowTimePicker(false)
            }} />
    }

    function check(array) {
        createSchedule({
            schedules: array,
            only_check: true,
            return_all: true,
            op_page: 'SCHEDULE_WALKTHROUGH_1', sort_by: 'EVENT'
        }).then(res => {
            dispatch(setSchedules((res as any).schedules))
            dispatch(setFooter((res as any).footer))
            if ((res as any).result) {
                setErrors([])
            }
            else {
                setErrors((res as any).error_messages ? (res as any).error_messages : [])
            }
        })
    }

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

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

    function items() {
        var items = health.schedules.filter(item => item.window == 'FAST')
        return <Card>
            {
                errors.map((item1, index) => {
                    return <View key={index} className='error_tip'>{item1}</View>
                })
            }
            {
                items.map((obj, i) => {
                    return <ScheduleItem
                        index={i}
                        count={items.length}
                        key={i * 100}
                        obj={obj}
                        highlight={highlight}
                        showLine={i < items.length - 1}
                        errors={errors}
                        selMode={selMode}
                        days={obj.plus_days != 0 ? obj.plus_days : null}
                        hideReminderIcon={true}
                        // days="+1 day"
                        onChange={(time) => {
                            var array = JSON.parse(JSON.stringify(health.schedules))
                            array.map(item => {
                                if (item.id == obj.id) {
                                    item.time = time
                                    item.op_ms = new Date().getTime()
                                }
                            })
                            dispatch(setSchedules(array))

                            check(array)
                        }}
                    />
                })
            }
        </Card>
    }
    if (!loaded) return <View />
    return <View style={{ flex: 1, display: 'flex', flexDirection: 'column', height: '100vh' }}>
        <View style={{ height: navigationBarHeight, backgroundColor: MainColorType.g05 }} />
        <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_0_title')} subtitle={t('health.guide_0_desc')} />
        {
            items()
        }
        <CellFooter type={CellFooterType.left}>
            <View style={{ display: 'flex', flexDirection: 'column' }}>
                <CellFooterText text={footerTitle()} isBold />
                <CellFooterText text={footerDesc()} />
            </View>
        </CellFooter>
        <View style={{ flex: 1 }} />
        <View className="main_footer">
            <NewButton
                type={NewButtonType.fill}
                title={t('health.next')}
                disable={errors.length > 0}
                color={MainColorType.fast}
                width={rpxToPx(646)}
                height={rpxToPx(96)}
                onClick={() => {
                    jumpPage('./guide_sleep')
                }}
            />
        </View>
        {
            showTimePicker && <Modal
                testInfo={null}
                dismiss={() => {
                    setShowTimePicker(false)
                }}
                confirm={() => {

                }}>
                {
                    modalContent()
                }
            </Modal>
        }
    </View>
}