import { View, Text } from '@tarojs/components'
import './edit_schedule.scss'
import { useEffect, useState } from 'react'
import Modal from '@/components/layout/Modal.weapp'
import AddLabel from '../components/add_label'
import { delSchedule, getLabels, getSchedules } from '@/services/health'
import { AtSwipeAction } from "taro-ui"
import { useSelector } from 'react-redux'
import { getThemeColor } from '@/features/health/hooks/health_hooks'
import showActionSheet from '@/components/basic/ActionSheet'


export default function EditSchedule() {
    const [showModal, setShowModal] = useState(false)
    const [list, setList] = useState<any>([])
    const [labels, setLabels] = useState<any>([])
    const [showDel, setShowDel] = useState(false)
    const health = useSelector((state: any) => state.health);
    let navigation, showActionSheetWithOptions;

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

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

        })

        getLabels({ window: health.mode }).then(res => {
            setLabels((res as any).labels)
        })
    }

    function add() {
        setShowModal(true)
    }

    function delItem(index) {
        delSchedule(list[index].id).then(res => {
            schedules()
            global.refreshWindow()
            global.refreshHistory()
        })
    }

    function tapEdit() {
        let array:any = []
        switch(health.mode){
            case 'DAY':
            case 'NIGHT':
                array = ['设置提醒']
                break
            case 'FAST':
            case 'SLEEP':
                array = ['调整时间','设置提醒']
                break;
            case 'EAT':
            case 'ACTIVE':
                array = ['调整时间','设置提醒','编辑标记','删除']
                break;
            
        }
        showActionSheet({
            showActionSheetWithOptions: showActionSheetWithOptions,
            title: 'Oprate Title',
            itemList: array,
            success: (res) => {
                // tapActionSheet(res)
            }
        })
    }

    return <View>
        {
            list.map((item, index) => {
                // return <AtSwipeAction key={index} isOpened options={[
                //     {
                //         text: '删除',
                //         style: {
                //             backgroundColor: '#FF4949'
                //         }
                //     }
                // ]}>
                return <View className='item' key={index}>
                    {
                        showDel && <Text style={{ color: 'red', marginRight: 5 }} onClick={() => delItem(index)}>删除</Text>
                    }

                    <View className='item_left'>
                        {
                            health.mode == 'EAT' && <Text className='item_index'>第{index + 1}餐</Text>
                        }

                        <Text className='item_name'>{item.title}</Text>
                    </View>
                    <Text className='item_time'>{item.time}</Text>
                    <View className='item_line' />
                </View>
                // </AtSwipeAction>
            })
        }


        {
            (health.mode == 'EAT' || health.mode == 'ACTIVE') && <View className='toolbar'>
                <View className='toolbar_btn' style={{ color: getThemeColor(health.mode) }} onClick={add}>添加</View>
                <View style={{ flex: 1 }} />
                <View className='toolbar_btn' style={{ color: getThemeColor(health.mode) }} onClick={() => setShowDel(!showDel)}>移除</View>
            </View>
        }

        <Text onClick={tapEdit}>批量编辑</Text>

        {
            showModal && <Modal testInfo={null}
                dismiss={() => {
                    setShowModal(false)
                }}
                confirm={() => { }}>
                <AddLabel labels={labels} />
            </Modal>
        }
    </View>
}