import { webview } from '@kit.ArkWeb'
import { AppStorageKeyFishCollect, avPlayerManager, IBestToast, Params, YTHeader, YTUserRequest } from 'basic'

@Builder
function FishSettingViewBuilder() {
  NavDestination() {
    FishSettingView()
  }.title("设置")
  .hideTitleBar(true)
}

@Component
struct FishSettingView {
  @State selectMusic:number=1
  @StorageLink(AppStorageKeyFishCollect.FISHTEXT)
  textValue:string=""

  aboutToDisappear(): void {
    YTUserRequest.updateSuspensionCharacters({suspensionCharacters:this.textValue} as Params)
  }

  build() {
    Column() {
      YTHeader({title:'设置'})

      Column({space:20}){
        Row() {
          Text('悬浮文字').fontColor(Color.White)
        }.width('100%')
        .justifyContent(FlexAlign.Start)
        Stack({alignContent:Alignment.End}){
          TextInput({text:$$this.textValue})
            .fontColor($r('[basic].color.login_main_yellow'))
            .borderRadius(15).width('100%')
            .backgroundColor('#787878')
            .onChange((value)=>{
              if(value.length>7){
                IBestToast.show({
                  message:'最多7个字'
                })
                this.textValue=this.textValue.slice(0,7)
                return
              }

            })
          Image($r('app.media.muyu')).width(24).margin({right:10}).onClick(()=>{this.textValue=""})
        }

      }.width('100%')
      .backgroundColor('#3f3f3f')
      .padding({left:10,right:10,top:20,bottom:20})
      .borderRadius(15)
      .height(150)
      .margin({bottom:20})

      Column({space:20}){
        Row() {
          Text('木鱼音色').fontColor(Color.White)
        }.width('100%')
        .justifyContent(FlexAlign.Start)
        Row({space:30}) {
          ForEach([1, 2, 3], (item: number) => {
            Column({space:5}) {
              Text(item.toString()).fontColor($r('[basic].color.login_main_yellow'))

              Image($r('app.media.muyu')).width(30)


            }.width(60)
            .height(60)
            .justifyContent(FlexAlign.Center)
            .borderRadius(15)
            .backgroundColor(this.selectMusic==item?'#3dbbd1':'#000000')
            .onClick(()=>{
              this.selectMusic=item
              avPlayerManager.playByRawSrc(`music${item}.mp3`)
            })
          })
        }.width('100%').justifyContent(FlexAlign.Start)



      }.width('100%')
      .backgroundColor('#3f3f3f')
      .padding({left:10,right:10,top:20,bottom:20})
      .borderRadius(15)
      .height(150)



    }.width('100%')
    .height('100%')
    .backgroundColor(Color.Black)
    .padding({left:20,right:20})
  }
}