import { CommonConstants } from '../common/constants/CommonConstants';

@CustomDialog
export struct CreateFolderDialog {
  controller?: CustomDialogController;
  onConfirm?: (folderName: string) => void;
  onCancel?: () => void;
  initialName: string = '';
  title: string = '新建文件夹';
  placeholder: string = '请输入文件夹名称';
  confirmText: string = '创建';
  cancelText: string = '取消';
  themeColor: string = CommonConstants.DEFAULT_THEME_COLOR;

  @State folderName: string = '';

  aboutToAppear(): void {
    this.folderName = this.initialName || '';
  }

  private handleConfirm(): void {
    const name = this.folderName.trim();
    if (name.length === 0) {
      return;
    }
    this.onConfirm?.(name);
    this.controller?.close();
  }

  private handleCancel(): void {
    this.onCancel?.();
    this.controller?.close();
  }

  build() {
    Column() {
      Text(this.title)
        .fontSize(20)
        .fontWeight(FontWeight.Medium)
        .margin({ bottom: 12 });

      TextInput({ text: this.folderName, placeholder: this.placeholder })
        .width('100%')
        .height(48)
        .backgroundColor(Color.White)
        .padding({ left: 12, right: 12 })
        .borderRadius(12)
        .onChange((value: string) => {
          this.folderName = value;
        });

      Row() {
        Button(this.cancelText)
          .layoutWeight(1)
          .height(44)
          .backgroundColor(Color.Transparent)
          .fontColor(Color.Gray)
          .border({ color: Color.Gray, width: 1, radius: 12 })
          .onClick(() => this.handleCancel())
          .margin({ right: 8 });

        Button(this.confirmText)
          .layoutWeight(1)
          .height(44)
          .backgroundColor(this.themeColor || CommonConstants.DEFAULT_THEME_COLOR)
          .fontColor(Color.White)
          .borderRadius(12)
          .onClick(() => this.handleConfirm())
          .margin({ left: 8 });
      }
      .margin({ top: 16 })
      .justifyContent(FlexAlign.SpaceBetween);
    }
    .padding(24)
    .width('100%')
    .backgroundColor($r('app.color.start_window_background'))
    .borderRadius(24);
  }
}