import { BasicType, NavDiaLogModel } from '../../../../../Index'
import { DiaLogCompControl } from './DiaLogControl'

@ComponentV2
export struct DiaLogComp {
  @Param controller?: DiaLogCompControl = undefined
  @Param param: BasicType = {}

  @BuilderParam container: () => void

  control: DiaLogCompControl = new DiaLogCompControl(this.getUIContext())

  aboutToAppear(): void {
    if (this.controller) {
      this.control = this.controller
    }
  }

  build() {
    NavDestination(){
      Column(){
        Column(){
          if(this.container) {
            this.container()
          } else {
            this.containerComp()
          }
        }
        // 屏蔽外部容器的点击事件
        .onClick(() => {})
        .scale({ x: this.control.opacity_, y: this.control.opacity_ })
      }
      .width("100%")
      .height("100%")
      .opacity(this.control.opacity_)
      .backgroundColor(this.control.bgc)
      .justifyContent(FlexAlign.Center)
      .alignItems(HorizontalAlign.Center)
      .onClick(() => { this.control._onBackPress()})
      .onAppear(() => { this.control.appear() })
    }
    .hideTitleBar(true)
    .mode(NavDestinationMode.DIALOG)
    .onBackPressed(() => { return this.control._onBackPress() })
    .systemTransition(NavigationSystemTransitionType.NONE)
  }

  @Builder
  containerComp(){
    Column() {
      Text(this.param.text ?? '一个弹窗')
        .fontColor(Color.Black)
        .lineHeight(18)
        .fontSize(18)
        .textAlign(TextAlign.Center)
        .margin({ bottom: 18 })

      if(this.param.message) {
        Text(this.param.message)
          .fontSize(15)
          .lineHeight(18)
          .fontColor('#C1C1C1')
          .margin({ bottom: 18 })
          .textAlign(TextAlign.Center)
      }

      Row({space: 20}) {
        Text('取消')
          .fontSize(16)
          .fontWeight(400)
          .borderRadius(36)
          .layoutWeight(1)
          .border({width: 1})
          .fontColor(Color.Black)
          .backgroundColor('#F5F5F7')
          .textAlign(TextAlign.Center)
          .padding({ top: 10, bottom: 10})
          .onClick(() => {
            this.control._onBackPress(0)
          })

        Text(this.param.date ?? '确定')
          .fontSize(16)
          .fontWeight(400)
          .layoutWeight(1)
          .borderRadius(36)
          .fontColor(Color.Black)
          .textAlign(TextAlign.Center)
          .padding({ top: 10, bottom: 10})
          .backgroundColor(this.param.color ?? '#FFFECF2F')
          .onClick(() => {
            this.control._onBackPress(1)
          })
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%')
    }
    .width(315)
    .borderRadius(8)
    .backgroundColor(Color.White)
    .padding({ top: 28, left: 32, right: 32, bottom: 20 })
  }
}

@Builder
export function DiaLogCompBuilder(_: string, param: NavDiaLogModel){
  DiaLogComp({ param: param.param, controller: param.control, container: param.builder })
}