import { YTDiaLogModel } from '../../models/YTDiaLogModel'
import { yTRouter } from '../../utils/YTRouter'

@ComponentV2
export struct YTDiaLogComp {
  @Local _offset: Length = '0%'
  @Local _opacity: number = 0

  // 弹窗的位置： 底部，中间。（均有对应的动画）
  @Require @Param Align: YTDiaLogModel = YTDiaLogModel.Bottom
  // 是否返回
  @Require @Param isBack: boolean
  // 弹窗的内容
  @BuilderParam _content: () => void
  // 重新返回方法
  @Event _onPop: () => void = () => {
    yTRouter.pop('', false)
  }

  @Monitor('isBack')
  fatherIsBack(){
    setTimeout(() => {
      this._onBackPress()
    }, 0)
  }

  private _onBackPress(ans?: string | boolean) {
    animateToImmediately({
      duration: 300
    }, () => {
      if(this.Align === YTDiaLogModel.Bottom) {
        this._offset = '0%'
      } //else {
        this._opacity = 0
      // }
    })
    setTimeout(() => {
      this._onPop()
    }, 250)
    return true
  }

  private _onAppear(){
    animateToImmediately({
      duration: 350
    }, () => {
      this._offset = '-100%'
      this._opacity = 1
    })
  }

  private getAlign(): FlexAlign{
    if(this.Align === YTDiaLogModel.Center) return FlexAlign.Center
    else if (this.Align === YTDiaLogModel.Bottom) return FlexAlign.End
		return FlexAlign.Center
	}

  aboutToAppear(): void {
    if(this.Align === YTDiaLogModel.Center) this._offset = '-100%'
  }

  build() {
    NavDestination() {
      Column() {
        Column()
          .height('50%')
          .width("100%")
          .backgroundColor('rgba(0, 0, 0, 0.5)')

        Column(){
          Column(){
            if(this._content) {
              this._content()
            }
          }
          .onClick(() => {})
          .scale(this.Align === YTDiaLogModel.Center ? { x: this._opacity, y: this._opacity, centerX:'50%', centerY:'75%' } : null)
        }
        .width('100%')
        .height('50%')
        .justifyContent(this.getAlign())
        .backgroundColor('rgba(0, 0, 0, 0.5)')
        .alignItems(HorizontalAlign.Center)
        .onClick(() => {
          this._onBackPress()
        })
      }
      .height('200%')
      .width("100%")
      .offset({
        y: this._offset
      })
      .opacity(this._opacity)
      .onAppear(() => { this._onAppear() })
    }
    .hideTitleBar(true)
    .mode(NavDestinationMode.DIALOG)
    .systemTransition(NavigationSystemTransitionType.NONE)
    .onBackPressed(() => {
      return this._onBackPress()
    })
  }
}