import { BasicType, NavDiaLogModel } from "../../../../../Index"
import { DiaLogSheetControl } from "./DiaLogControl"

@ComponentV2
export struct DiaLogSheetComp {
  @Param controller?: DiaLogSheetControl = undefined
  @Param params: Array<BasicType> = []

  @BuilderParam container: (_: () => void) => void = this.containerComp

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

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

  build() {
    NavDestination() {
      Column() {
        Column().layoutWeight(1).width('100%')
          .gesture(
          TapGesture()
            .onAction(() => {
              this.control._onBackPress()
            })
        )

        Column() {
          Column(){
            this.containerComp()
          }
          .onAreaChange((o, n) => {
            this.control.containerH = n.height as number
          })

          Blank()
            .height(this.control.h_)
            .backgroundColor(Color.White)
        }
        .onTouch((event: TouchEvent) => {
          this.control.edgeEffect(event)
          event.stopPropagation();
        })
        .offset({ y: this.control.h_ < 0 ? Math.abs(this.control.h_ as number) : 0 })
      }
      .width('100%')
      .height('200%')
      .opacity(this.control.opacity_)
      .backgroundColor(this.control.bgc)
      .offset({ y: this.control.offsetY_ })
      .justifyContent(FlexAlign.End)
      .onAppear(() => { this.control.appear() })
      .alignItems(HorizontalAlign.Center)
    }
    .hideTitleBar(true)
    .mode(NavDestinationMode.DIALOG)
    .onBackPressed(() => { return this.control._onBackPress() })
    .systemTransition(NavigationSystemTransitionType.NONE)
  }

  @Builder
  containerComp(){
    Column(){
      ForEach(this.params, (item: BasicType, index) => {
        Row(){
          Text(item.text)
            .fontSize(16)
            .textAlign(TextAlign.Center)
        }
        .width("100%")
        .onClick(() => {
          this.control._onBackPress(item.text)
        })
        .alignItems(VerticalAlign.Center)
        .justifyContent(FlexAlign.Center)
        .padding({ top: 24, bottom: 24 })

        Divider().width("80%").height(1).backgroundColor('#000000F2')
      })

      Row(){
        Text(`取消`)
          .fontSize(16)
          .textAlign(TextAlign.Center)
      }
      .width("100%")
      .alignItems(VerticalAlign.Center)
      .justifyContent(FlexAlign.Center)
      .padding({ top: 24, bottom: 24 })
      .onClick(() => { this.control._onBackPress() })
    }
    .width("100%")
    .padding({ bottom: 30 })
    .backgroundColor(Color.White)
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .borderRadius({ topLeft: 8, topRight: 8 })
  }
}

@Builder
export function DiaLogSheetCompBuilder(_: string, params: NavDiaLogModel){
  DiaLogSheetComp({ params: params.params, controller: params?.control as DiaLogSheetControl })
}