import Modal from "@/components/layout/Modal.weapp";
import TimePicker from "@/features/common/TimePicker";
import { getScenario, getThemeColor } from "@/features/health/hooks/health_hooks";
import { createSchedule, getSchedules } from "@/services/health";
import { View, Text } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import './edit.scss'

export default function SchedulesTime() {
    const health = useSelector((state: any) => state.health);
    const [scenario, setScenario] = useState(getScenario(health.windows, health.mode))
    const [showTimePicker, setShowTimePicker] = useState(false)
    const [list, setList] = useState<any>([])
    const [selItem, setSelItem] = useState<any>(null)

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

    function schedules() {
        getSchedules({ window: health.mode, is_all_day: false }).then(res => {
            if ((res as any).data && (res as any).data.length > 0) {
                setList((res as any).data)
            }
        }).catch(e => {

        })
    }

    function changeTime(item) {
        setSelItem(item)
        setShowTimePicker(true)
    }

    function modalContent() {
        const strTime = selItem.time

        var title = selItem.title
        var color = getThemeColor(health.mode)

        return <TimePicker time={strTime}
            color={color}
            title={title}
            confirm={(e) => {
                confirmPickerTime(e)
            }}
            cancel={() => {
                setShowTimePicker(false)
            }} />
    }

    function confirmPickerTime(e) {
        console.log(e)
        setShowTimePicker(false)
        selItem.time = e;
        setList([...list])
    }

    function save() {
        var array: any = []
        list.map((item) => {
            array.push({
                id: item.id,
                time: item.time,
                event: item.event,
                title: item.title
            })
        })

        createSchedule({

            schedules: array
        }).then(res => {
            global.refreshWindow()
            global.refreshSchedules()
            if (process.env.TARO_ENV == 'weapp') {
                Taro.navigateBack()
            }
        })
    }

    if (list.length == 0) return <View />

    return <View>
        {
            list.map((item, index) => {
                return <View className="edit_item_cell" key={index} onClick={() => changeTime(item)}>
                    <Text className="cell_index">{index + 1}</Text>
                    <Text>{item.title}</Text>
                    <View style={{flex:1}}/>
                    <Text>{item.time}</Text>
                    {
                        index <= list.length - 1 && <View className='edit_item_cell_line' />
                    }
                </View>
            })
        }
        <View className="edit_footer_btn" style={{ color: getThemeColor(health.mode), backgroundColor: getThemeColor(health.mode) + '33' }} onClick={save}>完成</View>
        {
            showTimePicker && <Modal
                testInfo={null}
                dismiss={() => {
                    setShowTimePicker(false)
                }}
                confirm={() => { }}>
                {
                    modalContent()
                }
            </Modal>
        }
    </View>
}