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";

export default function GuideFull() {
    const health = useSelector((state: any) => state.health);
    const [errors, setErrors] = useState<any>([])

    const [selItem, setSelItem] = useState<any>(null)
    const [selIndex, setSelIndex] = useState(-1)
    const [showTimePicker, setShowTimePicker] = useState(false)

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

    function itemStyle(obj) {
        if (obj.is_conflict) {
            return {
                backgroundColor: '#FF00001A',
                color: '#FF0000'
            }
        }
        if (errors.length > 0) {
            return {
                backgroundColor: '#B2B2B21A',
                color: '#000'
            }
        }
        return {
            backgroundColor: obj.window == selMode ? getThemeColor(selMode) + '1A' : '#B2B2B21A',
            color: obj.window == selMode ? getThemeColor(selMode) : '#000'
        }
    }

    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
                    }
                })
                dispatch(setSchedules(array))
                // var array = JSON.parse(JSON.stringify(list))
                // array[selIndex].time = e
                // setList(array)
                // checkData(array)
            }}
            cancel={() => {
                setShowTimePicker(false)
            }} />
    }

    function commit(){
        createSchedule({
            schedules: health.schedules
            // only_check: true
        }).then(res => {
            const data={
                title:'一切就绪!',
                description:'你的日程已启动',
                current_window:(res as any).current_window
            }
            jumpPage('./post_result?type=schedule&data='+JSON.stringify(data))
        })
        
        
    }

    function items() {
        return <Card>
            {
                health.schedules.map((obj, i) => {
                    return <View className='schedule_item' key={i} style={{
                        width: rpxToPx(700),
                        boxSizing: 'border-box',
                        backgroundColor:  '#fff'

                    }}>
                        <View className='item_left2'>
                            <View className='item_index'>
                                <View className="index_point" style={{ backgroundColor: getThemeColor(obj.window) }} />
                            </View>
                            <Text className='item_name'>{obj.title}</Text>
                            <View style={{ flex: 1 }} />
                            {
                                obj.is_conflict && <Text className="conflict_tip">时间冲突，请调整</Text>
                            }
                            {/* {
                                !obj.is_all_day && !obj.reminder && <Image src={require('@assets/images/notification_off.png')} className='notification_icon' />
                            } */}
                            {
                                !obj.is_all_day && <View className='edit_item_time' style={{backgroundColor:'transparent'}}>{obj.time}</View>
                            }

                            {
                                i < items.length - 1 && <View className='item_line' />
                            }
                        </View>
                    </View>
                })
            }
        </Card>
    }
    return <View style={{ flex: 1, display: 'flex', flexDirection: 'column', height: '100vh' }}>
        <NewHeader type={NewHeaderType.center_subtitle} title="即将完成!" subtitle="查看我的日程" />
        {
            items()
        }
        <View style={{ flex: 1 }} />
        <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: rpxToPx(128) }}>
            <NewButton
                type={NewButtonType.fill}
                title="完成"
                color={MainColorType.fast}
                width={rpxToPx(646)}
                height={rpxToPx(96)}
                onClick={commit}
            />
        </View>
        {
            showTimePicker && <Modal
                testInfo={null}
                dismiss={() => {
                    setShowTimePicker(false)
                }}
                confirm={() => {

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