import { XDialogCommon } from './XDialogCommon'
import { XDialogController } from './XDialogController'


@Preview
@Component
export struct XDialogList {
  controller: XDialogController | null = null
  onSelected: (index: number, value: string) => void = (index: number, value: string) => {
  }
  onCancel?: () => void = undefined
  title?: string = undefined
  values?: Array<string> | Array<object> = undefined
  autoCancel?: boolean = false
  private dialogController: CustomDialogController | null = null

  build() {
    // this.buildContent()
  }

  aboutToAppear(): void {

    this.dialogController = new CustomDialogController({
      builder: XDialogCommon({
        dialogContent: () => {
          this.buildContent()
        },
      }),
      alignment: DialogAlignment.Center,
      autoCancel: this.autoCancel ?? false,
      cancel: () => {
        this.onCancel && this.onCancel()
      }
    })
    if (this.controller) {
      this.controller.open = () => {
        this.dialogController?.open()
      }
      this.controller.close = () => {
        this.dialogController?.close()
      }
    }
  }

  @Builder
  buildContent() {
    Column() {
      Text(this.title)
        .fontSize(13)
        .textAlign(TextAlign.Center)
        .width('60%')
        .maxLines(2)
        .ellipsisMode(EllipsisMode.END)
        .textOverflow({
          overflow: TextOverflow.Ellipsis
        })
        .visibility(this.title ? Visibility.Visible : Visibility.None)
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.values ?? [], (item: string, index: number) => {
          ListItem() {
            Text(item)
              .width('100%')
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .onClick(() => {
                this.onSelected(index, item)
                this.dialogController?.close()
              })
          }
        }, (item: string) => item)
      }
      .listDirection(Axis.Vertical) // 排列方向
      .scrollBar(BarState.Off)
      .friction(0.6)
      .divider({ strokeWidth: 1, color: 0xEEEEEE, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
      .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring
      .width('100%')
      .height(this.values === undefined ? '20%' : this.values?.length < 8 ? `${this.values?.length / 16 * 100}%` : '50%')
      .margin({ top: 20 })
    }.padding({ top: 20, bottom: 20, left: 20, right: 20 })
  }
}