import { DropDownImageInfo, DropDownInfo, TextInfo, TextInputInfo } from '../../models/TextSelectModel'
import { BreakPointSize, YTBreakPoint } from '../../utils/arkts/utils/YTBreakPoint'


@Component
export struct TextSelect {
  public dropDownImageInfo: DropDownImageInfo = {
    dropDownImage: $r('app.media.ic_expand_more_black'),
    dropDownImageHeight: 11,
    dropDownImageWidth: 11,
    dropDownImageBackgroundColor: Color.Transparent,
    dropDownImageMargin: { right: 4 }
  } //右侧下拉图标
  public textInfo: TextInfo = {
    fontSize: 18,
    fontColor: '#3D3D3D'
  } //显示的文本样式
  public dropDownInfo: DropDownInfo = {
    backgroundColor: Color.Black,
    fontSize: 16,
    fontColor: Color.White,
    height: 130
  } //下拉框样式
  @Prop @Require @Watch('init') selectOptions: Array<ESObject> = [] //下拉框数据
  @Require showName: string = '' //要展示的字段名
  @Prop showImageName: string = '' //要展示的图片字段名
  defaultOption: ESObject //默认选中项
  public moduleHeight?: Length = 40 //组件高度
  textInputInfo: TextInputInfo | null = null //自定义输入框配置，不传则不显示
  @StorageProp(YTBreakPoint.BreakPointVp) breakPointSize: BreakPointSize = { width: 0, height: 0 }
  @State selectPosition: Position = { x: 0, y: 0 }
  @State private selectHeight: Length = 0
  @State private isShowSelect: boolean = false
  @State private selectText: ResourceStr = ''
  @State private selectImage: ResourceStr = ''
  public onchange = (item: ESObject) => {
  }
  public textInputSubmit = (text: string) => {
  }

  init() {
    if (this.selectOptions[0]) {
      if (!this.defaultOption) {
        this.defaultOption = this.selectOptions[0]
      }
      this.selectText = this.defaultOption[this.showName]
      if (this.showImageName) {
        this.selectImage = this.defaultOption[this.showImageName]
      }
    }
  }

  aboutToAppear(): void {
    if (this.selectOptions[0]) {
      if (!this.defaultOption) {
        this.defaultOption = this.selectOptions[0]
      }
      this.selectText = this.defaultOption[this.showName]
      if (this.showImageName) {
        this.selectImage = this.defaultOption[this.showImageName]
      }
    }
  }

  build() {
    Column() {
      if (this.isShowSelect) {
        Column() {

        }
        .position(this.selectPosition)
        .backgroundColor(Color.Transparent)
        .width(this.breakPointSize.width)
        .height(this.breakPointSize.height)
        .onClick(() => {
          this.isShowSelect = false
          this.selectHeight = 0
        })
      }
      Column() {
        RelativeContainer() {
          if (this.selectImage) {
            Image(this.selectImage)
              .width(14)
              .alignRules({
                'center': { anchor: '__container__', align: VerticalAlign.Center },
                'start': { anchor: '__container__', align: HorizontalAlign.Start }
              })
          }

          Text(this.selectText)
            .fontSize(this.textInfo.fontSize)
            .fontWeight(FontWeight.Normal)
            .fontColor(this.textInfo.fontColor)
            .alignRules({
              'center': { anchor: '__container__', align: VerticalAlign.Center },
              'middle': { anchor: '__container__', align: HorizontalAlign.Center }
            })

          Image(this.dropDownImageInfo.dropDownImage)
            .height(this.dropDownImageInfo.dropDownImageHeight)
            .width(this.dropDownImageInfo.dropDownImageWidth)
            .backgroundColor(this.dropDownImageInfo.dropDownImageBackgroundColor)
            .alignRules({
              'center': { anchor: '__container__', align: VerticalAlign.Center },
              'end': { anchor: '__container__', align: HorizontalAlign.End }
            })

        }
        .onClick(() => {
          this.isShowSelect = !this.isShowSelect
          animateTo({ duration: 300 }, () => {
            if (this.isShowSelect) {
              this.selectHeight = this.dropDownInfo.height
            } else {
              this.selectHeight = 0
            }
          })
        })
        .height('100%')
        .width('100%')
        .border({ width: 1, color: '#cbcbcb', radius: 5 })
        .backgroundColor(Color.White)
        .padding({ left: 16, right: 16 })

        if (this.isShowSelect) {
          this.selectBuilder()
        }
      }
      .height(this.moduleHeight)
    }
    .onAreaChange((old, newArea) => {
      this.selectPosition = {
        x: -(newArea.globalPosition.x as number),
        y: -(newArea.globalPosition.y as number)
      }
    })
    .zIndex(200)
  }

  @Builder
  selectBuilder() {
    Row() {
      List() {
        ForEach(this.selectOptions, (item: ESObject) => {
          ListItem() {
            RelativeContainer() {

              Image(item[this.showImageName])
                .width(14)
                .alignRules({
                  'center': { anchor: '__container__', align: VerticalAlign.Center },
                  'start': { anchor: '__container__', align: HorizontalAlign.Start }
                })

              Text(item[this.showName])
                .fontSize(this.dropDownInfo.fontSize)
                .fontColor(this.dropDownInfo.fontColor)
                .fontWeight(FontWeight.Normal)
                // .padding({ top: 4, bottom: 4 })
                // .margin({
                //   left: 15,
                //   right: 15,
                //   top: 4,
                //   bottom: 4
                // })
                .alignRules({
                  'center': { anchor: '__container__', align: VerticalAlign.Center },
                  'middle': { anchor: '__container__', align: HorizontalAlign.Center }
                })

            }
            .width('100%')
            .height(this.moduleHeight)
            .onClick(() => {
              this.selectText = item[this.showName]
              if (this.showImageName) {
                this.selectImage = item[this.showImageName]
              }
              this.isShowSelect = false
              this.selectHeight = 0
              this.onchange(item)
            })
            .padding({ left: 16, right: 16 })
          }
        })
        if (this.textInputInfo) {
          ListItem() {
            Row() {
              TextInput({ placeholder: this.textInputInfo.placeholder, text: this.textInputInfo.text })
                .width('100%')
                .height('100%')
                .placeholderFont({ size: 14 })
                .padding({ left: 10, right: 10 })
                .border({ width: 1, color: '#cbcbcb', radius: 5 })
                .backgroundColor(Color.Transparent)
                .onChange((value: string) => {
                  this.textInputInfo!.text = value
                })
                .onSubmit(() => {
                  this.selectText = this.textInputInfo!.text
                  this.isShowSelect = false
                  this.selectHeight = 0
                  this.textInputSubmit(this.textInputInfo!.text)
                  this.textInputInfo!.text = ''
                })

            }
            .padding({ left: 10, right: 10 })
            .height(this.textInputInfo.height)
            .width('100%')
          }
        }
      }
      .height('100%')
      .scrollBar(BarState.Off)
      .listDirection(Axis.Vertical) // 排列方向
      // .divider({ strokeWidth: 1, color: 0xCBCBCB }) // 每行之间的分界线
      .edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果
    }
    .backgroundColor(this.dropDownInfo.backgroundColor)
    .border(this.dropDownInfo.border)
    .width('100%')
    .height(this.selectHeight)
    .borderRadius({ bottomLeft: 10, bottomRight: 10 })
  }
}