@Entry
@ComponentV2
struct Index {
  @Local arr: Array<string> = Array(25).fill('').map((v,i) => `${i}`);
  scroller: Scroller = new Scroller();
  @Local totalCount:number = this.arr.length;

  shift() {
    this.arr.shift();
    this.totalCount = this.arr.length;
  }

  unshift() {
    // TBD need better logic
    let min = Math.min(...this.arr.map(v => (+v || 0)));
    if (min === Infinity) min = 0;
    this.arr.unshift(`${min - 1}`);
    this.totalCount = this.arr.length;
  }

  update(index: number) {
    // TBD need better logic
    this.arr[index] = `${-this.arr[index] || 0}`;
    this.totalCount = this.arr.length;
  }

  build() {
    Column({ space: 5 }) {
      Text('4_grid_hq.ets')

      Row({space: 3}) {
        Button('shift').onClick(() => this.shift())
        Button('unshift').onClick(() => this.unshift())
        Button('update #0').onClick(() => this.update(0))
      }.padding(10)

      Grid(this.scroller) {
        Repeat( this.arr )
          // @ts-ignore 
          .virtualScroll({
            totalCount: this.totalCount,
          })
          .key((day: string) => day)
          .each((ri) => {
            GridItem() {
              Text(ri.item)
                .fontSize(16)
                .backgroundColor(0xF9CF93)
                .width('100%')
                .height(80)
                .textAlign(TextAlign.Center)
            }.border({width:1})
          })

        /*
        Repeat( this.arr )
          // @ts-ignore 
          .virtualScroll({
            totalCount: this.totalCount,
          })
          .each((ri) => {
            Repeat( this.arr )
              // @ts-ignore 
              .virtualScroll({
                totalCount: this.totalCount,
              })
              .key((day: string) => day)
              .each((ri) => {
                GridItem() {
                  Text(ri.item)
                    .fontSize(16)
                    .backgroundColor(0xF9CF93)
                    .width('100%')
                    .height(80)
                    .textAlign(TextAlign.Center)
                }.border({width:1})
              })
          })
        */

        /* ForEach analog
        ForEach( this.arr, (day: string) => {
          ForEach( this.arr, (day: string) => {
            GridItem() {
              Text(day)
                .fontSize(16)
                .backgroundColor(0xF9CF93)
                .width('100%')
                .height(80)
                .textAlign(TextAlign.Center)
            }
          }, (day:string) => day)
        }, (day: string) => day)
        */
        
      }
      .onScrollIndex((start, end) => {
        console.log('onScrollIndex', start, end);
      })
      .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .onScrollIndex((first: number) => {
        console.info(first.toString())
      })
      .width('90%')
      .backgroundColor(0xFAEEE0)
      .height(300)
      Button('next page')
        .onClick(() => {
          this.scroller.scrollPage({ next: true })
        })
    }.width('100%').margin({ top: 5 })
  }
}