import { View, Text, Image } from '@tarojs/components'
import './schedules_list.scss'
import './edit.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'
import { jumpPage } from '@/features/trackTimeDuration/hooks/Common'
import { IconAdd } from '@/components/basic/Icons'
import { rpxToPx } from '@/utils/tools'


export default function SchedulesList() {
    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()
    }, [])

    global.refreshSchedules = () => {
        schedules()
    }

    function schedules() {
        let windows = ''
        switch (health.mode) {
            case 'FAST':
                windows = 'FAST,EAT';
                break
            case 'EAT':
                windows = 'EAT,FAST';
                break
            case 'SLEEP':
                windows = 'SLEEP,ACTIVE';
                break
            case 'ACTIVE':
                windows = 'ACTIVE,SLEEP';
                break
        }
        getSchedules({ window: windows }).then(res => {
            if ((res as any).data && (res as any).data.length > 0) {
                // setList((res as any).data)

                let grouped: any = {};
                (res as any).data.forEach(item => {
                    const window = item.window;

                    if (!grouped[window]) {
                        grouped[window] = { window: window, list: [] };
                    }
                    grouped[window].list.push(item);
                });
                var array = Object.values(grouped)
                array.map((dt: any) => {
                    if (dt.window == 'EAT' || dt.window == 'ACTIVE') {
                        dt.list.push({
                            add: true
                        })
                    }
                })
                setList(array)
            }
        }).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() {
        jumpPage('./schedules_edit')
        return;
        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)
            }
        })
    }

    function tapActionSheet(index) {
        const mode = health.mode;
        switch (index) {
            case 0:
                switch (mode) {
                    case 'DAY':
                    case 'NIGHT':
                        jumpPage('/_health/pages/schedules_reminder')
                        break;
                    default:
                        jumpPage('/_health/pages/schedules_time')
                        break;
                }
                break;
            case 1:
                jumpPage('/_health/pages/schedules_reminder')
                break;
            case 2:
                jumpPage('/_health/pages/schedules_mark')
                break;
            case 3:
                jumpPage('/_health/pages/schedules_del')
                break;
        }
    }

    function getTitle() {
        switch (health.mode) {
            case 'FAST':
                return '断食和进食';
            case 'EAT':
                return '进食和断食';
            case 'SLEEP':
                return '睡眠和活动';
            case 'ACTIVE':
                return '活动和睡眠';
        }
        return ''
    }

    return <View>
        <View className='schedule_header_title'>{getTitle()}</View>
        {
            list.map((item, index) => {
                return <View key={index} style={{ display: 'flex', flexDirection: 'column', marginBottom: rpxToPx(36) }}>
                    {
                        item.list.map((obj, i) => {
                            if (obj.add) {
                                return <View key={i * 100} className='item_add'
                                    hoverClass='cell_hover'
                                    hoverStayTime={50}
                                    onClick={add}>
                                    <IconAdd color={getThemeColor(item.window)} width={rpxToPx(34)} />
                                    <View className='toolbar_btn' style={{ color: getThemeColor(item.window) }} >添加</View>
                                    <View style={{ flex: 1 }} />
                                    {/* <View className='toolbar_btn' style={{ color: getThemeColor(health.mode) }} onClick={() => setShowDel(!showDel)}>移除</View> */}
                                </View>
                            }

                            return <View className='schedule_item' key={i * 100} hoverClass='cell_hover' hoverStayTime={50} onClick={() => {

                            }}>

                                <View className='item_left'>
                                    <Text className='item_index'>{i + 1}</Text>


                                    <Text className='item_name'>{obj.title}</Text>
                                </View>
                                <View style={{ flex: 1 }} />
                                {
                                    !obj.reminder && <Image src={require('@assets/images/notification_off.png')} className='notification_icon' />
                                }

                                <Text className='item_time'>{obj.time}</Text>
                                {
                                    i < item.list.length - 1 && <View className='item_line' />
                                }

                            </View>
                        })
                    }
                </View>
            })
        }

        <View className="edit_footer_btn" style={{ color: getThemeColor(health.mode), backgroundColor: getThemeColor(health.mode) + '33' }} onClick={tapEdit}>批量编辑</View>

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