/*
 * Copyright (C) 2024 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 { AnimatorOption, ImageKnifeAnimatorComponent, ImageKnifeOption } from '@ohos/libraryimageknife'
import { PageViewModel } from './model/PageViewModel'

@Entry
@Component
struct ImageAnimatorPage {
  @State animatorOption: AnimatorOption = {
    state: AnimationStatus.Running,
    iterations: -1,
    onFinish: () => {
      console.log('ImageKnifeAnimatorComponent animatorOption onFinish')
    },
    onStart: () => {
      console.log('ImageKnifeAnimatorComponent animatorOption onStart')
    },
    onPause: () => {
      console.log('ImageKnifeAnimatorComponent animatorOption onPause')
    },
    onCancel: () => {
      console.log('ImageKnifeAnimatorComponent animatorOption onCancel')
    },
    onRepeat: () => {
      console.log('ImageKnifeAnimatorComponent animatorOption onRepeat')
    }
  }
  @State animatorOptionFirstFrame: AnimatorOption = {
    state: AnimationStatus.Initial
  }
  @State animatorOptionLastFrame: AnimatorOption = {
    state: AnimationStatus.Initial,
    reverse: true
  }
  @State imageKnifeOption: ImageKnifeOption = {
    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
        })
      }

      ImageKnifeAnimatorComponent({
        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)
          ImageKnifeAnimatorComponent({
            imageKnifeOption: this.imageKnifeOption,
            animatorOption: this.animatorOptionFirstFrame
          }).width(120).height(120).backgroundColor(Color.Orange)
        }

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