@ObservedV2
class GridArrayHolder {
  @Trace arr: Array<number> = [];

  constructor(count: number) {
    for (let i = 0; i < count; ++i) {
      this.arr.push(i)
    }
  }
}

//@Reusable
@ComponentV2
struct ReusableItem {
  @Param reusableItem: number = 0

  aboutToAppear(): void {
    console.info('item:' + this.reusableItem)
  }

  build() {
    Column() {
      Button('N' + this.reusableItem).height(50)
      Image('res/picture(' + this.reusableItem % 5 + ').jpg')
        .objectFit(ImageFit.Fill)
        .width('100%')
        .height(100)
    }
  }
}

@Entry
@ComponentV2
struct ParentGrid {
  @Local arrayHolder: GridArrayHolder = new GridArrayHolder(20);
  @Local totalCount = this.arrayHolder.arr.length
  @Local options: GridLayoutOptions = { regularSize: [1, 1], irregularIndexes: [this.totalCount] }
  scroller: Scroller = new Scroller();

  build() {
    Column({ space: 5 }) {
      Text('grid_repeat_test.ets')
      Row() {
        Button('scrollTo 0').height(100).onClick(() => {
          this.scroller.scrollToIndex(0)
        })
        Button('scrollTo 4').height(100).onClick(() => {
          this.scroller.scrollToIndex(4)
        })
        Button('scrollTo 10').height(100).onClick(() => {
          this.scroller.scrollToIndex(10)
        })
      }

      Row() {
        Button(`change[0] ${this.arrayHolder.arr[0]}`).height(100).onClick(() => {
          this.arrayHolder.arr[0] = this.arrayHolder.arr[0] + this.arrayHolder.arr[0]
        })
        Button('delete[0]').height(100).onClick(() => {
          this.arrayHolder.arr.shift()
          this.totalCount = this.arrayHolder.arr.length
          this.options.irregularIndexes = [this.totalCount]
        })
        Button('add 10').height(100).onClick(() => {
          let oldCount = this.arrayHolder.arr.length
          let newData: number[] = []
          for (let i = 0; i < 10; ++i) {
            newData.push(oldCount + i)
          }
          this.arrayHolder.arr.splice(oldCount, 0, ...newData)
          this.totalCount = this.arrayHolder.arr.length
          this.options.irregularIndexes = [this.totalCount]
        })
      }

      Grid(this.scroller, this.options) {
        Repeat(this.arrayHolder.arr)
          .virtualScroll({ totalCount: this.totalCount })
          .key((item, index) => `${index}-${item}`)
          .each((r) => {
            GridItem() {
              ReusableItem({ reusableItem: r.item })
            }.backgroundColor(Color.Green)
          })
        GridItem() {
          Text('last Item').width('100%').height(50).fontColor(Color.White).backgroundColor(Color.Blue)
        }
      }
      .onScrollIndex((start, end) => {
        console.log('onScrollIndex', start, end);
      })
      .onReachEnd(() => {
        let oldCount = this.arrayHolder.arr.length
        let newData: number[] = []
        for (let i = 0; i < 10; ++i) {
          newData.push(oldCount + i)
        }
        this.arrayHolder.arr.push(...newData)
        this.totalCount = this.arrayHolder.arr.length
        this.options.irregularIndexes = [this.totalCount]
      })
      .columnsTemplate('1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .width('90%')
      .backgroundColor(0xFAEEE0)
      .height(300)

      Button('next page')
        .onClick(() => {
          this.scroller.scrollPage({ next: true })
        })
    }.width('100%').margin({ top: 5 })
  }
}