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

class DS implements IDataSource {
  private arr: any[] = [];
  public dcl: DataChangeListener;
  constructor(arr: any[]) {
    this.arr = arr;
    //this.arr = Array(100).fill(0).map((v,i) => `${i}`);
    //console.log('pikalov DS.constructor');
  }
  totalCount(): number {
    return this.arr.length;
  }
  getData(index: number): any {
    return this.arr[index];
  }
  registerDataChangeListener(listener: DataChangeListener): void {
    this.dcl = listener;
  }
  unregisterDataChangeListener(listener: DataChangeListener): void {
  }
};

//
@Component
struct MyLazyForEachComp {
  @State arr: number[] = [];
  @State ds: DS = new DS(this.arr);
  base: number = 0;
  // for measurements
  @State timeStart: number = 0;
  @State timeEnd: number = 0;

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

      List() {
        //LazyForEach(this.ds, (row, index) => {
        LazyForEach(this.ds, (row) => {
            ListItem() {
              Row() {
                // something heavy to render
                Text("😐")
                Text("😐")
                Text("😐")

                // added background to make area-change visible
                Text(`${row}`).backgroundColor(0xeeeeee)
                  .onAreaChange(() => {
                    this.timeEnd = Date.now();
                    //aceTrace.begin('MyForEach ACE_TRACE END')
                    //aceTrace.end()
                  })
              }
              .width('90%').border({width:1})
            }
          },
          (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.ds.dcl?.onDataAdded(0);
        }
        this.base += ITEMS_PER_OP
        //aceTrace.begin('MyForEach ACE_TRACE BEGIN')
        //aceTrace.end()
      })

      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]
          this.ds.dcl?.onDataChanged(i);
        }
        //aceTrace.begin('MyForEach ACE_TRACE BEGIN')
        //aceTrace.end()
      })

      Button(`Delete First ${ITEMS_PER_OP} Rows`)
      .onClick(() => {
        this.timeStart = this.timeEnd = Date.now()
        this.arr.splice(0, ITEMS_PER_OP); // Remove elements from the beginning
        //aceTrace.begin('MyForEach ACE_TRACE BEGIN')
        //aceTrace.end()
        for (let i=0; i < ITEMS_PER_OP; i++) { this.ds.dcl?.onDataDeleted(0); }
      })
    }
  }
}

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