let counter: number = 0;

@Entry
@ComponentV2
struct MyComponent {
  @Local arr:Array<string> = [...Array(15)].map(() => `${++counter}`);
  @Local totalCount:number = this.arr.length;
  @Local cachedCount:number = 1; //TBD
  scroller: Scroller = new Scroller();

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

  unshift() {
    this.arr.unshift(`${++counter}`);
    this.totalCount = this.arr.length;
  }

  update(index: number) {
    this.arr[index] = `${-this.arr[index]}`;
    this.totalCount = this.arr.length;
    //this.c++;
  }

  remove(index: number) {
    this.arr.splice(1,1);
    this.totalCount = this.arr.length;
  }

  wait(ms: number): Promise<void> {
    return new Promise(done => setTimeout(done, ms))
  }

  build() {
    Column() {
      Text('2_list_endless.ets').fontSize(32)
      Text(`totalCount: ${this.totalCount}, arr.length: ${this.arr.length}`)

      Row({space: 3}) {
        Button('Scroll top').onClick(() => this.scroller.scrollToIndex( 0))
        Button('Scroll 20' ).onClick(() => this.scroller.scrollToIndex(20))
        Button('Scroll 30' ).onClick(() => this.scroller.scrollToIndex(30))
      }.padding(10)

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

      List({ space: 3, scroller:this.scroller }) {
        Repeat(this.arr)
          // @ts-ignore 
          .virtualScroll({
            totalCount: this.totalCount
          })
          //
          .templateId((item:string, index:number) => {
            return index % 2 ? 'font-32' : 'something-wrong';
          })
          //
          .template("font-32", (ri) => {
            ListItem() { Text(`#${ri.index}: ${ri.item}`).fontSize(32) }.border({width:1})
              .opacity(+ri.item < 10_000 ? 1.0 : 0.3)
          }, { cachedCount: this.cachedCount })
          
          .each((ri) => {
            ListItem() { Text(`#${ri.index}: ${ri.item}`).fontSize(64) }.border({width:1})
              .opacity(+ri.item < 10_000 ? 1.0 : 0.3)
          })
          //
          .key((item, index) => {
            return `${item}`;
          })

      }
      .height('580')
      .border({width:1})
      .onScrollIndex((start, end) => {
        console.log('onScrollIndex', start, end);
        if (end < this.arr.length - 1) {
          return
        }
        // lazy load
        this.wait(1).then(item => {
          this.arr.push(`${++counter + 10_000}`);
          this.totalCount = this.arr.length;
        });
      })

    }.height('100%').backgroundColor(0xeeeeee)
  }
}