import { LrcLine, LrcPosition, LrcView, parseLyrics} from '@jackiehou/lyric-view'
import { common } from '@kit.AbilityKit'
import { util } from '@kit.ArkTS'
import { media } from '@kit.MediaKit'
import { UIUtils } from '@kit.ArkUI'
import Logger from '../utils/Logger'


export class ObservedValue<T> {
  value: T

  constructor(value: T) {
    this.value = value
  }
}

@Entry
@Component
struct SamplePage {
  private context = this.getUIContext().getHostContext() as common.UIAbilityContext

  /**
   * 由于LrcView组件是@ComponentV2 ,这里不能用@State，因此这里用UIUtils.makeObserved来让属性具备刷新UI的能力
   */
  lrcLines: ObservedValue<LrcLine[]> = UIUtils.makeObserved(new ObservedValue([]))
  isPlay:ObservedValue<boolean> = UIUtils.makeObserved(new ObservedValue(true))

  player:media.AVPlayer|undefined
  //返回负值歌词不和播放器同步，这里为了演示效果，因此position函数返回负值，和播放器同步的代码参考LrcPage
  lrcPosition :LrcPosition = new LrcPosition(() =>this.player?.currentTime ?? -1)

  async aboutToAppear() {
    let buffer = await this.context.resourceManager.getRawFileContent('word-by-word.lrc')
    let textDecoder = util.TextDecoder.create('utf-8', { ignoreBOM: true });
    let stringData = textDecoder.decodeToString(buffer, { stream: false })
    this.lrcLines.value = parseLyrics(stringData)
  }

  build() {
    Column({space:10}) {
      LrcView({
        lrcLines:this.lrcLines.value,
        isPlay:this.isPlay.value,
        lrcPosition:this.lrcPosition,
        normalFontColor:$r('sys.color.font_secondary'),
        selectFontColor:$r('sys.color.font_primary'),
        highlightFontColor:$r('sys.color.font_emphasize'),
        onLrcLineClick:(start) =>{
          this.player?.seek(start)
          this.lrcPosition.seekTo(start)
          return true
        },
        log:(level,tag,msg)=>{
          Logger.log(level,tag , msg)
        }
      })
        .width('100%')
        .layoutWeight(1)

      SymbolGlyph(this.isPlay.value ? $r('sys.symbol.pause_circle') :$r('sys.symbol.play_circle'))
        .fontSize(50)
        .fontColor([$r('sys.color.font_primary')])
        .onClick(() =>{
          this.isPlay.value = !this.isPlay.value
        })
    }
    .height('100%')
    .width('100%')
    .padding(15)
  }



}