/*
 * 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 { ImageKnifeComponent } from '@ohos/libraryimageknife'
import { PageViewModel } from './model/PageViewModel'

@Observed
export class MsgModel {
  id: string
  cId: string
  body: string
  status: number

  constructor(id: string, body: string, cId?: string) {
    this.id = id
    this.body = body
    this.status = -1
    this.cId = cId || ''
  }
}


@Reusable
@Component
export struct MsgItem {
  count: number = 0

  build(){
    if (this.count % 2 == 0 && this.count <6){
      ImageKnifeComponent({
        imageKnifeOption:{
          loadSrc:$r('app.media.startIcon'),
          placeholderSrc:$r('app.media.loading')
        },syncLoad:true
      })
    }else if (this.count > 6 && this.count - 6 < PageViewModel.getFlashes().length){
      ImageKnifeComponent({
        imageKnifeOption:{
          loadSrc:PageViewModel.getFlashes()[this.count - 6],
          placeholderSrc:$r('app.media.loading')
        },syncLoad:true
      })
    }else {
      ImageKnifeComponent({
        imageKnifeOption:{
          loadSrc:$r('app.media.pngSample'),
          placeholderSrc:$r('app.media.loading')
        },syncLoad:true
      })
    }
  }
}

@Entry
@Component
struct ImageTestPage {
  count : number = 0
  rCount: number = 0
  scroller: Scroller = new Scroller()
  @State list: MsgModel[] = []
  @State imageSize: number =100
  handAdd(){
    this.count++
    const msgItem = new MsgModel('add_id'+this.count, 'addBody'+this.count,'cId'+ this.count)
    this.list.push(msgItem)
    setTimeout(()=> {
      msgItem.status = 1
    },3000)
    this.scroller.scrollEdge(Edge.Bottom)
  }

  build(){
    Column(){
      Row(){
        Button('addItem').onClick(()=> {
          this.handAdd()
        })
        Button('remove').onClick(()=> {
          this.list.splice(0,1)
        })
      }
      Row(){
        Text($r('app.string.Click_on_add'))
          .onClick(()=> {
            this.imageSize = this.imageSize + 50
          })
          .width('50%').backgroundColor(0x88ff0000).textAlign(TextAlign.Center).height(50)
        Text($r('app.string.Click_on_reduce'))
          .onClick(()=> {
            this.imageSize = Math.max(this.imageSize - 50, 0)
          })
          .width('50%').backgroundColor(0x88ff0000).textAlign(TextAlign.Center).height(50)
      }.height(50).width('100%')

      List({space: 20, scroller: this.scroller }) {
        ForEach(this.list, (item: MsgModel)=> {
          ListItem(){
            MsgItem({count : this.count}).width(this.imageSize).height(this.imageSize);
          }
        },(item:MsgModel)=> item.id)
      }.width('100%').height('auto').layoutWeight(1)
    }
    .width('100%')
    .height('100%')
  }
}