import showAlert from "@/components/basic/Alert";
import { getThemeColor } from "@/features/health/hooks/health_hooks";
import { rpxToPx } from "@/utils/tools";
import { View, Text } from "@tarojs/components";
import { AtSwipeAction } from "taro-ui";
import StatusIndicator, { StatusType } from "../base/status_indicator";
import { MainColorType } from "@/context/themes/color";
import { IconError, IconNotificationOff } from "@/components/basic/Icons";
import { useState } from "react";
import NewModal from "../base/new_modal";
import Card from "./card";
import NewTimePicker from "../base/new_timepicker";
import './schedule_item.scss'

export default function ScheduleItem(props: {
    key: any,
    obj: any,
    highlight?: boolean,
    disable?: boolean,
    gray?:boolean,
    days?:string,
    showLine: boolean,
    errors: any,
    selMode: any,
    onDelete?:Function,
    onChange?: Function
}) {
    const [showTimePicker, setShowTimePicker] = useState(false)
    const [time, setTime] = useState(props.obj.time)

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


    return <View key={props.key}>
        <AtSwipeAction
            isOpened={false}
            autoClose
            disabled={props.obj.window != 'EAT' && props.obj.window != 'ACTIVE' && !props.disable}
            options={[
                {
                    text: '删除',
                    style: {
                        backgroundColor: '#FF4949'
                    }
                }
            ]}
            onClick={() => {
                if (props.obj.window == 'ACTIVE' || props.obj.window == 'EAT') {
                    // if (item.list.length == 1) {
                    //     Taro.showToast({
                    //         title: '至少保留一项',
                    //         icon: 'none'
                    //     })
                    //     return;
                    // }
                }
                showAlert({
                    title: '删除',
                    content: '确认删除此计划',
                    showCancel: true,
                    cancel: () => {
                        console.log('cancel')
                    },
                    confirm: () => {
                        if (props.onDelete){
                            props.onDelete()
                        }
                        // delItem(index, i)
                    }
                })
            }}
        ><View className='schedule_item' style={{
            width: rpxToPx(700),
            boxSizing: 'border-box',
            backgroundColor: props.highlight ? getThemeColor(props.obj.window) + '08' : '#fff'

        }}>
                <View className='item_left2'>
                    <StatusIndicator
                        type={props.obj.is_conflict ? StatusType.img : StatusType.normal}
                        text={props.obj.title}
                        fontSize={rpxToPx(34)}
                        fontColor="#000"
                        color={props.obj.is_conflict ? MainColorType.error : props.errors.length == 0 ? getThemeColor(props.obj.window) : 'transparent'} >
                        {
                            props.obj.is_conflict && <IconError color="#fff" width={rpxToPx(26)} />
                        }

                    </StatusIndicator>
                    <View style={{ flex: 1 }} />
                    {
                        props.days && <View className="h30" style={{color:MainColorType.g02}}>{props.days}</View>
                    }
                    {
                        !props.obj.is_all_day && !props.obj.reminder && <IconNotificationOff color={MainColorType.g03} width={rpxToPx(28)} />
                    }
                    <View style={{ width: rpxToPx(12) }} />
                    {
                        !props.disable&&!props.obj.is_all_day && <View className='edit_item_time' onClick={() => {
                            // setSelIndex(i)
                            // setSelItem(obj)
                            setTime(props.obj.time)
                            setShowTimePicker(true)
                            // if (props.onClick)
                            //     props.onClick()
                        }} style={itemStyle(props.obj)}>{props.obj.time}</View>
                    }
                    {
                        props.disable && <View className="edit_item_time" style={{backgroundColor:'transparent',color:props.gray?MainColorType.g02:'#000'}}>{props.obj.time}</View>
                    }


                </View>
                {
                    props.showLine && <View className='border_footer_line' style={{ left: rpxToPx(66) }} />
                }
            </View>
        </AtSwipeAction>
        {
            showTimePicker && <NewModal title={props.obj.title}
                dismiss={() => { setShowTimePicker(false) }}
                confirm={() => {
                    setShowTimePicker(false)
                    if (props.onChange)
                        props.onChange(time)
                    // props.onChange({
                    //     time: time,
                    //     duration: minutes,
                    //     isYesterday: isYesterday
                    // })
                }}
                themeColor={getThemeColor(props.obj.window)}>
                <Card>
                    <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                        <View className="picker_title" style={{ color: getThemeColor(props.obj.window), width: rpxToPx(618) }}>{time}
                            <View className="border_footer_line" />
                        </View>
                        <NewTimePicker time={time}
                            color={getThemeColor(props.obj.window)}
                            onChange={(e) => {
                                setTime(e)
                            }}
                        />
                    </View>
                </Card>

            </NewModal>
        }
    </View>
}