import { TaskItem } from "../models/Task";
import { promptAction } from "@kit.ArkUI";
import { StateColor } from "../constants/index";
import dayjs from 'dayjs'


@Component
export struct DueTime{
  @State message: string = 'Hello World';
  @State isEditing:boolean=true
  @State taskList: Array<TaskItem> = [
    new TaskItem({
      id:1,
      taskName:"猪猪",
      detail:"haha",
      startDate:new Date().getTime()-2592000000,
      dueDate:new Date().getTime()+2592000000,
      isCompleted:0,
      category:1,
      categoryName:"默认清单",
      topped:0
    }),
    new TaskItem({
      id:1,
      taskName:"猪猪",
      detail:"haha",
      startDate:new Date().getTime()-2592000000,
      dueDate:new Date().getTime(),
      isCompleted:0,
      category:1,
      categoryName:"默认清单",
      topped:0
    }),
    new TaskItem({
      id:2,
      taskName:"猪猪1",
      detail:"haha1",
      startDate:new Date().getTime(),
      dueDate:new Date().getTime()+2592000000,
      isCompleted:0,
      category:1,
      categoryName:"默认清单",
      topped:0
    }),
    new TaskItem({
      id:3,
      taskName:"猪猪1",
      detail:"ha2ha",
      startDate:new Date().getTime(),
      dueDate:new Date().getTime()+36000,
      isCompleted:0,
      categoryName:"默认清单",
      category:1,
      topped:0
    }),
  ]
  @Builder TaskList_ListItem(item: TaskItem) {
    Column({space:10}) {
      Row() {
        Row() {
            Checkbox()
              .select(item.isCompleted?true:false)
              .onChange((value: boolean) => {
                animateTo({duration: 300, curve: Curve.EaseInOut}, () => {
                  // item.is_completed = value
                  // this.updateExistingTask(item)
                })
              })
              .margin({ right: 10 })
          Text(item.taskName)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .maxLines(1)
            .width('60%')
        }
        Row() {
          Column() {
            Text(dayjs(item.startDate).format('YYYY-MM-DD'))
              .fontSize(16)
            Text(dayjs(item.dueDate).format('YYYY-MM-DD'))
              .fontSize(13)
          }.alignItems(HorizontalAlign.End)
          .margin({ right: 10 })
          }
        Column(){

        }.width(12)
        .height(12)
        .backgroundColor(item.getTaskColor())
        .borderRadius('50%')
        }
      Progress({value: item.getProgressPercent(),total:100})
        .margin({bottom: 10,left:20})
        .color(item.getTaskColor())
        .width(300)

      }.justifyContent(FlexAlign.Center)
      .alignItems(HorizontalAlign.Start)
      .backgroundColor(Color.White)
      .borderRadius(15)
      .width('100%')
      .height(66)
      .width('100%')
      .padding({ left: 12, right: 18 })


    }


  @Builder TaskListState(text: string, state: string) {
    Column() {
      Text(text)
        .fontSize(20)
        .width('100%')
        .margin({ bottom: 10, top: 20 })
        .textAlign(TextAlign.Start)
        .padding({ left: 12, right: 12 })

      List({space:10}) {
        // 未办事项
        ForEach(this.taskList, (item: TaskItem) => {
          if (!item.isCompleted && item.getTaskState() == state) {
            ListItem() {
              this.TaskList_ListItem(item)
            }.width('100%')
            .onClick(() => {
              // this.taskItem = item
              // this.dialogController_view.open()
            })
          }
        })
      }
      .width('100%')
      .scrollBar(BarState.Off)
      .divider({ strokeWidth: 1 })
      .margin({ bottom: 20 })
    }.layoutWeight(1)
  }

  build() {

    Scroll(){
      Column() {
        this.TaskListState('非常紧急', 'CRITICAL')
        this.TaskListState('紧急', 'HARD')
        this.TaskListState('还有时间', 'MEDIUM')
        this.TaskListState('刚刚够','MILD')
        this.TaskListState('该开始了', 'EASY')


        // Text(new Date().getTime().toString()).onClick(()=>{
        //   promptAction.showToast({
        //     message:JSON.stringify((Math.floor(new Date().getTime()/1000)).toString())
        //   })
        // })
        // Button().onClick(()=>{
        //   promptAction.showToast({
        //     message:this.taskList[0].getTaskState()
        //   })
        // })
      }.padding({ left: 12, right: 12, bottom: 10, top: 10 })
      .layoutWeight(1)
      .margin({bottom: 40})

    }.width('100%')
    .height('100%')
    .scrollBar(BarState.Off)
  }
}