import { ComponentContent } from '@kit.ArkUI';
import { StrUtil } from '@pura/harmony-utils';
import { DialogCallback } from '../callback/DialogCallback';
import { ToastUtils } from '../utils/ToastUtils';

export declare class EditTextDialogOption {
  title?: string;
  content?: string;
  hintText?: string;
  confirm?: (content: string) => void;
}

@Builder
function defaultBuilder(option: EditTextDialogOption) {
  Column() {
    RelativeContainer() {
      Text(option.title ?? '编辑')
        .width('auto')
        .fontColor($r('app.color.color_212226'))
        .fontSize(18)
        .fontWeight(FontWeight.Medium)
        .alignRules( {
          left: {anchor: '__container__', align: HorizontalAlign.Start},
          right: {anchor: '__container__', align: HorizontalAlign.End}
        })

      Image($r('app.media.ic_close')).width(20).height(20)
        .alignRules( {
          top: {anchor: '__container__', align: VerticalAlign.Top},
          right: {anchor: '__container__', align: HorizontalAlign.End}
        })
        .margin({ right: 16 })
        .onClick(() => {
          EditTextDialog.dismiss()
        })
    }
    .width('100%')
    .height(30)

    TextInput({ placeholder: option.hintText ?? '请输入', text: option.content})
      .width('90%')
      .height(48)
      .fontColor($r('app.color.color_222222'))
      .fontSize(15)
      .placeholderColor($r('app.color.color_999999'))
      .placeholderFont({ size: 15 })
      .maxLength(12)
      .backgroundColor(Color.White)
      .borderRadius(8)
      .margin({ top: 16 })
      .onChange((content) => {
        option.content = content
      })

    Button('确定', { type: ButtonType.Capsule, stateEffect: true })
      .fontColor(Color.White)
      .fontSize(16)
      .width('90%')
      .height(46)
      .margin({ top: 30 })
      .backgroundColor($r('app.color.color_466afd'))
      .onClick(() => {
        if (StrUtil.isEmpty(option.content)) {
          ToastUtils.show('内容不能为空')
        } else {
          if (option.confirm) {
            option.confirm(option.content!!);
          }
          EditTextDialog.dismiss();
        }
      })
  }
  .padding({ top: 22, bottom: 22 })
  .borderRadius(20)
  .backgroundColor($r('app.color.window_background'))
  .width('100%')
}

export class EditTextDialog {
  context: UIContext | null = null;
  contentNode: ComponentContent<Object> | null = null;

  private static instance: EditTextDialog | null = null;

  static show(context: UIContext, option: EditTextDialogOption) {
    if (EditTextDialog.instance === null) {
      EditTextDialog.instance = new EditTextDialog(context, option);
    }
    EditTextDialog.instance?.openDialog();
  }

  static dismiss() {
    if (EditTextDialog.instance !== null) {
      EditTextDialog.instance.closeDialog();
      EditTextDialog.instance = null;
    }
  }

  constructor(context: UIContext, option: EditTextDialogOption) {
    this.context = context;
    this.contentNode = new ComponentContent(context, wrapBuilder(defaultBuilder), option);
  }

  openDialog() {
    if (this.context !== null && this.contentNode !== null) {
      this.context.getPromptAction().openCustomDialog(this.contentNode, {
        maskColor: '#CC000000',
        autoCancel: false,
        alignment: DialogAlignment.Bottom
      })
        .then(() => {
          console.info('OpenCustomDialog complete.');
        })
    }
  }

  closeDialog() {
    if (this.context !== null && this.contentNode !== null) {
      this.context.getPromptAction().closeCustomDialog(this.contentNode)
        .then(() => {
          console.info('CloseCustomDialog complete.');
        })
    }
  }
}