import { AnimatorOptions, AnimatorResult } from "@kit.ArkUI"

export enum SpinImageType {
  RedLoading,
  WhiteLoading
}

@Component
export struct SpinImage {
  @Prop
  type?: SpinImageType
  @Prop
  url?: string
  @State
  animatedValue: number = 0
  private animator?: AnimatorResult
  private animatedAnimatorOptions: AnimatorOptions = {
    duration: 1000,
    easing: 'linear',
    delay: 0,
    fill: "both",
    direction: "reverse",
    iterations: -1,
    begin: 0,
    end: 360
  }

  aboutToAppear() {
    this.play()
  }

  aboutToDisappear() {
    this.animator?.cancel()
    this.animator = undefined
  }

  play() {
    if (this.animator) {
      this.animator!.play()
      return
    }

    this.animator = this.getUIContext()
      .createAnimator(this.animatedAnimatorOptions)
    this.animator.play()
    this.animator.onFrame = (progress: number) => {
      this.animatedValue = progress
    }
  }

  getImageSource(): ResourceStr {
    if(this.url){
      return this.url
    }
    switch (this.type) {
      case SpinImageType.RedLoading:
        return $r('app.media.loading_red_36')
      case SpinImageType.WhiteLoading:
        return $r('app.media.loading_white_64')
      default:
        return $r('app.media.loading_red_36')
    }
  }

  build() {
    Image(this.getImageSource()).aspectRatio(1).rotate({
      angle: -this.animatedValue
    })
  }
}