import { View, Text, Input, Switch } from "@tarojs/components";
import './add_label.scss'
import { useEffect, useState } from "react";
import Modal from "@/components/layout/Modal.weapp";
import TimePicker from "@/features/common/TimePicker";
import dayjs from "dayjs";
import { MainColorType } from "@/context/themes/color";
import { createSchedule, getLabelsTime, getSchedules } from "@/services/health";
import Taro from "@tarojs/taro";
import { useSelector } from "react-redux";
import { getThemeColor } from "@/features/health/hooks/health_hooks";

export default function AddLabel(props: { labels: any, defaultValue?: string, disMiss?: any }) {
    const [showTimePicker, setShowTimePicker] = useState(false)
    const health = useSelector((state: any) => state.health);
    const [value, setValue] = useState(props.defaultValue ?? '')
    const [isFullday, setIsFullday] = useState(false)
    const [timeLabels, setTimeLabels] = useState<any>([])
    const [strTime, setStrTime] = useState('')

    // function timeContent() {
    //     return <Modal
    //         testInfo={null}
    //         dismiss={() => {
    //             setShowTimePicker(false)
    //         }}
    //         confirm={() => { }}>
    //         {
    //             pickerContent()
    //         }
    //     </Modal>
    // }

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

    function getData() {

        getLabelsTime({}).then(res => {
            setTimeLabels((res as any).labels)
        })
    }

    function pickerContent() {
        const strTime = dayjs().format('HH:mm')
        return <TimePicker time={strTime}
            color={getThemeColor(health.mode)}
            title='开始时间'
            confirm={(e) => {
                confirmPickerTime(e)
            }}
            cancel={() => {
                setShowTimePicker(false)
            }} />
    }

    function confirmPickerTime(e) {
        console.log(e)
        createSchedule({

            schedules: [{
                event: health.mode == 'EAT' ? 'EAT_CUSTOM' : 'ACTIVE_CUSTOM',
                title: value,
                time: e, is_all_day: false,

            }]
        }).then(res => {
            global.refreshWindow()
            global.refreshSchedules()

            // if (process.env.TARO_ENV == 'weapp') {
            //     Taro.navigateBack()
            // }
        })
    }

    function done() {
        createSchedule({

            schedules: [{
                event: health.mode == 'EAT' ? 'EAT_CUSTOM' : 'ACTIVE_CUSTOM',
                title: value,
                time: dayjs().format('HH:mm'),
                is_all_day: isFullday,
                time_label: isFullday ? strTime : null
            }]
        }).then(res => {
            if (global.refreshWindow) {
                global.refreshWindow()
            }
            if (global.refreshSchedules) {
                global.refreshSchedules()
            }


            setShowTimePicker(false)
            if (props.disMiss) {
                props.disMiss()
            }
            // if (process.env.TARO_ENV == 'weapp') {
            //     Taro.navigateBack()
            // }
        })
    }

    function timeContent() {
        return <View>
            <View className="header1">Set Time</View>
            <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
                <Text>全天时间</Text>
                <Switch
                    color={getThemeColor(health.mode)}
                    onChange={(e) => {
                        setIsFullday(e.detail.value)
                        // item.reminder = e.detail.value
                        // setList([...list])
                    }} />
            </View>
            {
                isFullday ? <View>
                    <Input className="input_lb" placeholder="选择或输入时间标签" value={strTime} onInput={(e: any) => {
                        setStrTime(e.target.value)
                    }} />
                    <View className="label_bg">
                        {
                            timeLabels.map((item, index) => {
                                return <View className="label" key={index} onClick={() => setStrTime(item.title)}>{item.title}</View>
                            })
                        }
                    </View>
                </View> :
                    <View style={{ flexDirection: 'column', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        <Text>{dayjs().format('HH:mm')}</Text>
                        <Text>Picker placeholder</Text>
                    </View>
            }
            <View className="pop_footer" style={{ backgroundColor: getThemeColor(health.mode) }} onClick={() => done()}>完成</View>
        </View>
    }

    return <View>
        <View className="header1">标记为</View>
        <View className="body1">
            <Input className="input_lb" placeholder="选择或输入标签" value={value} onInput={(e: any) => {
                setValue(e.target.value)
            }} />
            <View className="label_bg">
                {
                    props.labels.map((item, index) => {
                        return <View className="label" key={index} onClick={() => setValue(item.title)}>{item.title}</View>
                    })
                }
            </View>
        </View>
        <View className="pop_footer" style={{ backgroundColor: getThemeColor(health.mode) }} onClick={() => setShowTimePicker(true)}>下一步</View>
        {/* {
            showTimePicker && timeContent()
        } */}
        {
            showTimePicker && <Modal testInfo={null}
                dismiss={() => {
                    setShowTimePicker(false)
                }}
                confirm={() => { }}>
                {
                    timeContent()
                }
            </Modal>
        }
    </View>
}