import { DateDialogOptions } from '../PickerDateTimeHelper'
import { ToolsHelper } from '../ToolsHelper'


@Component
export struct DatePickerView {
  @Prop option: DateDialogOptions | undefined = undefined
  @Prop dialogTag: string | undefined = undefined
  @State showYear: boolean = false
  @State showMonth: boolean = false
  @State showDay: boolean = false
  //年份相关
  @State startYear: number = 1970
  @State endYear: number = 1970
  @State currentYear: number = 0
  @State years: string[] = []
  // 月份相关
  @State startMonth: number = 1
  @State endMonth: number = 12
  @State currentMonth: number = 0
  @State months: string[] = []
  // day相关
  @State startDay: number = 1
  @State endDay: number = 30
  @State currentDay: number = -1
  @State days: string[] = []

  aboutToAppear(): void {
    if (!this.option?.type) {
      this.option!.type = 'YYYY-MM-DD'
    }
    this.checkYear()
    this.checkMonth()
    this.checkDays()
  }

  checkYear() {
    this.showYear = this.option!.type!.indexOf('YYYY') > -1
    if (this.showYear) {
      if (this.option?.startDate) {
        this.startYear = Number.parseInt(this.option.startDate?.split('-')[0])
      }
      if (this.option?.endDate) {
        this.endYear = Number.parseInt(this.option.endDate?.split('-')[0])
      } else {
        this.endYear = new Date().getFullYear() + 10
      }
      this.years = []
      for (let index = this.startYear; index <= this.endYear; index++) {
        this.years.push(index.toString())
      }
      if (this.option?.currentDate) {
        const cy = this.option.currentDate?.split('-')[0]
        this.currentYear = this.years.indexOf(cy)
      } else {
        this.currentYear = this.years.indexOf(new Date().getFullYear().toString())
      }
    }
  }

  checkMonth() {
    this.showMonth = this.option!.type!.indexOf('MM') > -1
    if (this.showMonth) {
      if (this.option?.startDate) {
        this.startMonth = Number.parseInt(this.option.startDate?.split('-')[1])
      }
      if (this.option?.endDate) {
        this.endMonth = Number.parseInt(this.option.endDate?.split('-')[1])
      } else {
        this.endMonth = 12
      }
      if (this.endMonth > 12) {
        this.endMonth = 12
      }
      if (this.endMonth < 1) {
        this.endMonth = 1
      }
      this.months = []
      for (let index = this.startMonth; index <= this.endMonth; index++) {
        this.months.push(index.toString())
      }
      if (this.option?.currentDate) {
        const cy = this.option.currentDate?.split('-')[1]
        this.currentMonth = this.months.indexOf(cy)
      } else {
        this.currentMonth = this.months.indexOf((new Date().getMonth() + 1).toString())
      }
    }
  }

  checkDays() {
    this.showDay = this.option!.type!.indexOf('DD') > -1
    if (this.showDay) {
      if (this.option?.startDate) {
        this.startDay = Number.parseInt(this.option.startDate?.split('-')[2])
      }
      const d = new Date(this.currentYear, this.currentMonth + 1, 0).getDate()
      if (this.option?.endDate) {
        this.endDay = Number.parseInt(this.option.endDate?.split('-')[2])
      } else {
        this.endDay = d
      }
      if (this.endDay > d) {
        this.endDay = d
      }
      if (this.endDay < 1) {
        this.endDay = 1
      }
      this.days = []
      for (let index = this.startDay; index <= this.endDay; index++) {
        this.days.push(index.toString())
      }
      if (this.currentDay === -1) {
        if (this.option?.currentDate) {
          const cy = this.option.currentDate?.split('-')[2]
          this.currentDay = this.days.indexOf(cy)
        } else {
          this.currentDay = this.days.indexOf((new Date().getDate()).toString())
        }
      } else {
        if (this.currentDay > this.days.length - 1) {
          this.currentDay = this.days.length - 1
        }
      }
    }
  }

  build() {
    Column() {
      Row() {
        Text('取消').fontSize(17).fontColor('#333333').onClick(() => {
          this.option?.onCancel?.()
          ToolsHelper.closeCustomDialog(this.dialogTag!)
        })
        Text('确定').fontSize(17).fontColor('#18ABFB').onClick(() => {
          this.option?.onConfirm?.(this.option!.type!.replace('YYYY', this.years[this.currentYear])
            .replace('MM', this.months[this.currentMonth])
            .replace('DD', this.days[this.currentDay])
          )
          ToolsHelper.closeCustomDialog(this.dialogTag!)
        })
      }.alignItems(VerticalAlign.Center)
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%')
      .padding(15)

      Row() {
        if (this.startYear) {
          TextPicker({ range: this.years, selected: $$this.currentYear })
            .onChange((value: string | string[], index: number | number[]) => {
              this.checkDays()
            }).canLoop(false)
        }
        if (this.startMonth) {
          TextPicker({ range: this.months, selected: $$this.currentMonth })
            .onChange((value: string | string[], index: number | number[]) => {
              this.checkDays()
            }).canLoop(false)
        }
        if (this.startDay) {
          TextPicker({ range: this.days, selected: $$this.currentDay })
        }

      }.width('100%').justifyContent(FlexAlign.Center).alignItems(VerticalAlign.Center)
    }

  }
}