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


@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
    // }),
  ]

  //获取task数据
  async getTaskData(){
    const list= await taskItemDB.query()  as ITaskItem[]
    this.taskList=[]
    list.map((item)=>{
      this.taskList.push(new TaskItem(item))
    })
    // promptAction.showToast({
    //   message:JSON.stringify(this.taskList)
    // })
  }
  aboutToAppear(): void {
    this.getTaskData()
  }
  @Builder TaskList_ListItem(item: TaskItem) {
    Column({space:20}) {
      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(100)

        Blank()
        Row() {
          Row() {
            Column() {
              Text(dayjs(item.dueDate).format('YYYY-MM-DD'))
                .fontSize(16)
            }.alignItems(HorizontalAlign.End)
            .margin({ right: 10 })
          }

          Column() {

          }.width(12)
          .height(12)
          .backgroundColor(item.getTaskColor())
          .borderRadius('50%')
        }
      }.width('100%')
      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 })

      Column({space:10}) {
        // 未办事项
        ForEach(this.taskList, (item: TaskItem) => {
          if (!item.isCompleted && item.getTaskState() == state) {
            Column() {
              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 })
    }
  }

  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()
        //   })
        // })
      }.height('100%')
      .justifyContent(FlexAlign.Start)
      .padding({ left: 12, right: 12, bottom: 10, top: 10 })

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