@ObservedV2
class GridArrayHolder {
  @Trace arr: Array<string> = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
}

@Entry
@ComponentV2
struct ParentGrid {
  @Local arrayHolder: GridArrayHolder = new GridArrayHolder();
  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 arr[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()
        })
        Button('change 20').height(100).onClick(() => {
          this.arrayHolder.arr[20] = this.arrayHolder.arr[20] + this.arrayHolder.arr[20]
        })
      }

      Grid(this.scroller) {
        GridItem() {
          Text('first Item').width('100%').height(50).fontColor(Color.White).backgroundColor(Color.Blue)
        }

        Repeat(this.arrayHolder.arr)
          // @ts-ignore
          .virtualScroll({ totalCount: this.arrayHolder.arr.length, })
          .key((item, index) => `${index}-${item}`)
          .each((r) => {
            GridItem() {
              Row() {
                Text(' * ')
                  .height(50).fontColor(Color.White).backgroundColor(Color.Blue)
                Text(`${r.index + 1}. `)
                  .height(50).fontColor(Color.White).backgroundColor(Color.Blue)
                Text(`Item ${r.item}`)
                  .height(50).fontColor(Color.White).backgroundColor(Color.Blue)
                Text(' * ')
                  .height(50).fontColor(Color.White).backgroundColor(Color.Blue)
              }
            }.backgroundColor(Color.Green)
          })
        GridItem() {
          Text('first Item').width('100%').height(50).fontColor(Color.White).backgroundColor(Color.Blue)
        }
      }
      .onScrollIndex((start, end) => {
        console.log('onScrollIndex', start, end);
      })
      .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 })
  }
}