/**
 * Compare performance of RepeatVirtualScroll vs LazyForEach
 *
 * This is slightly modified version of 0_meas.ets for RepeatVirtualScroll
 */
const ITEMS_PER_OP = 50;

//
@ComponentV2
struct MyRepeatVSComp {
  @Local arr: number[] = [];
  @Local totalCount:number = 0;
  base: number = 0;
  // for measurements
  @Local timeStart: number = 0;
  @Local timeEnd: number = 0;

  build() {
    Column({space:5}) {
      Text("REPEAT-VS UPDATE")
      Text(`delay:${this.timeEnd - this.timeStart} cnt:${this.arr.length}`)

      List() {
        Repeat(this.arr)
          .virtualScroll({ totalCount: this.totalCount })
          .each((row) => {
            ListItem() {
              Row() {
                // something heavy to render
                Text("😐")
                Text("😐")
                Text("😐")

                // added background to make area-change visible
                Text(`${row.item}`).backgroundColor(0xeeeeee)
                  .onAreaChange(() => {
                    this.timeEnd = Date.now();
                    //aceTrace.end()
                  })
              }
              .width('90%').border({width:1})
            }
          })
          .key(row => "Id_" + JSON.stringify(row))
      }
      .height(500)

      Button(`Add ${ITEMS_PER_OP} Uniq Rows`)
      .onClick(() => {
        this.timeStart = this.timeEnd = Date.now()
        for (let i = 0; i < ITEMS_PER_OP; i++) {
          this.arr.unshift( this.base + i );
        }
        this.base += ITEMS_PER_OP
        this.totalCount = this.arr.length
        //aceTrace.begin('MyRepeatVSComp ACE_TRACE BEGIN')
      })

      Button(`Update First ${ITEMS_PER_OP} Rows`)
      .onClick(() => {
        this.timeStart = this.timeEnd = Date.now()
        for (let i = 0; i < Math.min(ITEMS_PER_OP, this.arr.length); i++) {
          this.arr[i] = -this.arr[i]
        }
        //aceTrace.begin('MyRepeatVSComp ACE_TRACE BEGIN')
      })

      Button(`Delete First ${ITEMS_PER_OP} Rows`)
      .onClick(() => {
        this.timeStart = this.timeEnd = Date.now()
        this.arr.splice(0, ITEMS_PER_OP);
        this.totalCount = this.arr.length
        //aceTrace.begin('MyRepeatVSComp ACE_TRACE BEGIN')
      })
    }
  }
}

@Entry
@ComponentV2
struct ParentComp {
  build() {
    Column() {
      Row() {
        Text('3_meas.ets').fontSize(32)
      }
      Row() {
        Column() {
          MyRepeatVSComp()
        }.width('50%')
      }  
    }
  }
}