/*
 * Copyright (C) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the 'License');
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an 'AS IS' BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { AnimatorOptionV2, ImageKnifeAnimatorComponentV2, ImageKnifeOptionV2 } from '@ohos/libraryimageknife'
import { PageViewModel } from './model/PageViewModel'

@Entry
@ComponentV2
struct ImageAnimatorPageV2 {
  @Local animatorOption: AnimatorOptionV2 = new AnimatorOptionV2()
    .setState(AnimationStatus.Running)
    .setIterations(-1)
    .start(() => {
      console.log('ImageKnifeAnimatorComponent animatorOption onStart')
    })
    .finish(() => {
      console.log('ImageKnifeAnimatorComponent animatorOption onFinish')
    })
    .pause(() => {
      console.log('ImageKnifeAnimatorComponent animatorOption onPause')
    })
    .cancel(() => {
      console.log('ImageKnifeAnimatorComponent animatorOption onCancel')
    })
    .repeat(() => {
      console.log('ImageKnifeAnimatorComponent animatorOption onRepeat')
    })
  @Local animatorOptionFirstFrame: AnimatorOptionV2 = new AnimatorOptionV2()
    .setState(AnimationStatus.Initial)
  @Local animatorOptionLastFrame: AnimatorOptionV2 = new AnimatorOptionV2()
    .setState(AnimationStatus.Initial)
    .setReverse(true)
  @Local imageKnifeOption: ImageKnifeOptionV2 = new ImageKnifeOptionV2({
    loadSrc: PageViewModel.getGifMenus()[0],
    placeholderSrc: $r('app.media.loading'),
    errorholderSrc: $r('app.media.failed')
  })

  build() {
    Column() {
      Row() {
        Button($r('app.string.Play')).onClick(() => {
          this.animatorOption.state = AnimationStatus.Running
        })
        Button($r('app.string.Pause')).onClick(() => {
          this.animatorOption.state = AnimationStatus.Paused
        })
        Button($r('app.string.Stop')).onClick(() => {
          this.animatorOption.state = AnimationStatus.Stopped
        })
      }

      Row() {
        Button($r('app.string.Infinite_loop')).onClick(() => {
          this.animatorOption.iterations = -1
        })
        Button($r('app.string.Play_once')).onClick(() => {
          this.animatorOption.iterations = 1
        })
        Button($r('app.string.Play_twice')).onClick(() => {
          this.animatorOption.iterations = 2
        })
      }

      ImageKnifeAnimatorComponentV2({
        imageKnifeOption: this.imageKnifeOption,
        animatorOption: this.animatorOption
      }).width(300).height(300).backgroundColor(Color.Orange).margin({ top: 30 })

      Row({ space: 10 }) {
        Column() {
          Text($r('app.string.Display_the_first_frame')).fontSize(20)
          ImageKnifeAnimatorComponentV2({
            imageKnifeOption: this.imageKnifeOption,
            animatorOption: this.animatorOptionFirstFrame
          }).width(120).height(120).backgroundColor(Color.Orange)
        }

        Column() {
          Text($r('app.string.Display_the_last_frame')).fontSize(20)
          ImageKnifeAnimatorComponentV2({
            imageKnifeOption: this.imageKnifeOption,
            animatorOption: this.animatorOptionLastFrame
          }).width(120).height(120).backgroundColor(Color.Orange)
        }
      }.margin({ top: 50 }).padding(10)
    }.width('100%').height('100%')
  }
}