import { BasicType, IBestToast } from 'basic'
import { DiaLogPageEnum, DiaLogParam } from 'basic/src/main/ets/models/YTDiaLogModel'
import { NumberKeyBoard, NumberKeyBoardStyle } from './NumberKeyboard'
import { YtDatePicker } from './YtDatePicker'
import { _YtHeader } from './_YtHeader'


@Builder
export function getBuilder(param: DiaLogParam, onBack: (ans?: string) => void){
  if(param.pageEnum == DiaLogPageEnum.BottomMenu) BottomMenu(onBack, param.params)
  else if (param.pageEnum == DiaLogPageEnum.DatePicker) DatePickerBuilder(onBack, param.param)
  else if (param.pageEnum == DiaLogPageEnum.NumBerInput) NumberInputBuilder({onBack: onBack, param: param.param})
  else if (param.pageEnum == DiaLogPageEnum.Confirm) DoubleConfirm(onBack, param.param)
  else if (param.pageEnum == DiaLogPageEnum.TextInput) InputComp({onBack: onBack, param: param.param})

  /********  额外的   ***********/
}

// 底部菜单
@Builder
function BottomMenu(onBack: (ans:string) => void, params?: Array<BasicType>) {
  Column(){
    ForEach(params, (item: BasicType, index) => {
      Row(){
        Text(item.text)
          .fontSize(16)
          .textAlign(TextAlign.Center)
      }
      .width("100%")
      .alignItems(VerticalAlign.Center)
      .justifyContent(FlexAlign.Center)
      .padding({ top: 24, bottom: 24 })
      .onClick(() => {
        let ans = item.message ?? item.text ?? `${index}`
        onBack(ans)
      })

      Divider().width("80%").height(1).backgroundColor('#000000F2')
    })
  }
  .width("100%")
  .padding({ bottom: 30 })
  .backgroundColor(Color.White)
  .justifyContent(FlexAlign.Center)
  .alignItems(HorizontalAlign.Center)
  .borderRadius({ topLeft: 8, topRight: 8 })
}

// 时间选择器
@Builder
function DatePickerBuilder(onBack: (ans?:string) => void, param?: BasicType){
  YtDatePicker({
    selectDateBack: (date?: Date) => {
    if(!date) return onBack()
    // 转换为 YY-MM-DD HH:mm:ss 格式
    const year = date.getFullYear().toString();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');

    const result = `${year}-${month}-${day}`;
    onBack(result)
  },
    selectedDate: param?.date ? new Date(param.date) : new Date(),
    linearInfo: { colors: [['#95C50A', 1]] },
    needCancel: true
  })
}

// 对话框
@Builder
function DoubleConfirm(onBack: (ans?:string) => void, param?: BasicType) {
  Column() {
    if(param?.text)
      Text(param.text)
        .fontColor(Color.Black)
        .lineHeight(18)
        .fontSize(18)
        .textAlign(TextAlign.Center)
        .margin({ bottom: 18 })
    Row() {
      Text('取消')
        .fontSize(16)
        .fontWeight(400)
        .borderRadius(param?.number ?? 36)
        .fontColor(Color.Black)
        .backgroundColor('#F5F5F7')
        .padding({ left: 36, top: 9, right: 36, bottom: 9})
        .onClick(() => {
          onBack()
        })

      Text('确定')
        .fontSize(16)
        .fontWeight(400)
        .borderRadius(param?.number ?? 36)
        .fontColor(Color.Black)
        .padding({ left: 36, top: 9, right: 36, bottom: 9})
        .linearGradient({
          colors: [ param?.color ? [param.color, 1 ] : ['#30E3CE', 0.4], ['#91F1FF', 0.8] ],
          angle: 200
        })
        .onClick(() => {
          onBack('true')
        })
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .width('100%')
  }
  // .height(160)
  .width(280)
  .padding({ top: 28, left: 32, right: 32, bottom: 20 })
  .backgroundColor(Color.White)
  .borderRadius(8)
}

// 数字输入框
@ComponentV2
struct NumberInputBuilder{
  @Event onBack: (ans:string) => void
  @Param @Require param: BasicType

  @Local ans: string = ''

  aboutToAppear(): void {
    this.ans = this.param.text ?? ''
  }


  build() {
    Column(){
      // 标题
      RelativeContainer(){
        _YtHeader({ title: this.param?.text ?? '', isShowBackComp: false, })
          .height(44)
          .id('_title')
          .width("100%")
          .alignRules({
            top: { anchor: "__container__", align: VerticalAlign.Top},
            left: { anchor: "__container__", align: HorizontalAlign.Start}
          })

        Text(this.ans)
          .fontSize(32)
          .fontWeight(500)
          .fontColor('#30E3CE')
          .id('weight')
          .padding({left: 58, right: 58, bottom: 10, top: 60})
          .alignRules({
            top: { anchor: "_title", align: VerticalAlign.Bottom},
            middle: { anchor: "__container__", align: HorizontalAlign.Center}
          })

        Row()
          .width(151)
          .height(3)
          .backgroundColor('#30E3CE')
          .borderRadius(8)
          .alignRules({
            top: { anchor: "weight", align: VerticalAlign.Bottom},
            middle: { anchor: "__container__", align: HorizontalAlign.Center}
          })

        Text(this.param?.message ?? '')
          .fontSize(20)
          .fontWeight(500)
          .padding({ bottom: 10 })
          .fontColor('rgba(0, 0, 0, 0.5)')
          .alignRules({
            bottom: { anchor: "weight", align: VerticalAlign.Bottom},
            right: { anchor: "weight", align: HorizontalAlign.End}
          })
      }
      .height(210)
      .backgroundColor(Color.White)

      // 数字键盘
      Column(){
        NumberKeyBoard({
          textInputValue: this.ans,
          maxInputNum: 3,
          keyBoardStyle: new NumberKeyBoardStyle()
            .setFinishBackGround('#30E3CE')
            .setZeroBackGround(Color.White)
            .setBorder({ width: 0 })
            .setDeleteIcon($r('app.media.icon_delback')),
          onTextInputValueChange: (textInputValue: string) => {
            this.ans = textInputValue
          },
          onFinishClick: (text: string) => {
            if(!text || text == '0' || text == '0.') return
            if(text.charAt(text.length-1) === '.') this.ans += '0'
            this.onBack(this.ans!)
          }
        })
      }
      .height(260)
      .width("100%")
      .backgroundColor('#F5F6FA')
      .padding({ top: 10, bottom: 35, left: 10, right: 10})
    }
    // .height(470)
    .width("100%")
    .backgroundColor(Color.White)
    .padding({
      top: 24,
    })
  }
}

// 输入框
@ComponentV2
struct InputComp{
  @Event onBack: (ans?:string) => void
  @Param @Require param: BasicType

  @Local ans: string = ''

  aboutToAppear(): void {
    this.ans = this.param.text ?? ''
  }

  build() {
    Column({space: 10}){
      Row(){
        Text("取消")
          .fontSize(12)
          .fontWeight(400)
          .borderRadius(45)
          // .backgroundColor('#C1EDE9')
          .padding({ left: 20,top: 8, right: 20, bottom: 8})
          .onClick(() => {
            this.onBack()
          })

        // Text(this.param.text ?? '')
        //   .fontSize(18)
        //   .fontWeight(500)

        Text("确定")
          .fontSize(12)
          .fontWeight(400)
          .borderRadius(45)
          .fontColor(Color.Black)
          // .backgroundColor('#30E3CE')
          .padding({ left: 20,top: 8, right: 20, bottom: 8})
          .onClick(() => {
            this.onBack(this.ans)
          })
      }
      .width("100%")
      .alignItems(VerticalAlign.Center)
      .justifyContent(FlexAlign.SpaceBetween)

      TextInput({text: $$this.ans, placeholder: this.param.message})
        .height('48')
        .borderRadius(8)
        .defaultFocus(true)
        .maxLength(13)
        .backgroundColor('#F6F6F6')
        .onSubmit(() => {
          this.onBack(this.ans)
        })
    }
    .width("100%")
    .borderRadius({ topLeft: 10, topRight: 10 })
    .backgroundColor(this.param.color ?? '#ffff')
    .padding({ bottom: 42, left: 16, right: 16, top: 24 })
  }
}