import { getColorList, TextColorEntity } from '../entity/TextColorEntity';
import { ToastUtils } from '../utils/ToastUtils';

@CustomDialog
export struct TextWatermarkDialog {
  confirm: (text: string, color: string) => void = () => {};

  private controller: CustomDialogController;
  private content?: string;

  @State colorList: Array<TextColorEntity> = []
  @State color?: string = undefined;

  aboutToAppear(): void {
    this.colorList = getColorList()
    this.color = this.colorList[0].color
  }

  build() {
    Column() {
      RelativeContainer() {
        Text('加文字')
          .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(() => {
            this.controller.close()
          })
      }
      .width('100%')
      .height(30)

      TextInput({ placeholder: '请输入文字水印...' })
        .width('90%')
        .height(48)
        .fontColor($r('app.color.color_1a1a1a'))
        .fontSize(15)
        .placeholderColor('#A6A8B2')
        .placeholderFont({ size: 15 })
        .maxLength(12)
        .backgroundColor(Color.Transparent)
        .borderWidth(1)
        .borderColor('#C3C6D4')
        .borderRadius(8)
        .margin({ top: 16 })
        .onChange((content) => {
          this.content = content
        })

      List() {
        ForEach(this.colorList, (item: TextColorEntity) => {
          ListItem(){
            Text()
              .width('100%')
              .height('100%')
              .backgroundColor(item.color)
              .borderWidth(1)
              .borderColor(this.color === item.color ? $r('app.color.color_466afd') : item.color === '#FFFFFF' ? '#C3C6D4' : Color.Transparent)
          }
          .width(30)
          .height(30)
          .onClick(() => {
            this.color = item.color
          })
        })
      }
      .width('auto')
      .height(30)
      .listDirection(Axis.Horizontal)
      .margin({top: 40})

      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 (!this.content) {
            ToastUtils.show('请输入文字')
          } else {
            if (this.confirm) {
              this.confirm(this.content, this.color!!);
            }
            this.controller.close()
          }
        })
    }
    .padding({ top: 30, bottom: 22 })
    .backgroundColor(Color.White)
    .width('100%')
  }
}