@ObservedV2
class GridArrayHolder {
  @Trace arr: Array<ReusableData> = [];

  constructor(count: number) {
    for (let i = 0; i < count; i++) {
      this.arr.push(new ReusableData(i % 2 == 0 ? 13*i : 10*i));
    }
  }
}

@ObservedV2
class ReusableData {
    @Trace val: number;
    constructor(x?: number) {
        this.val = x || 1;
    }
}

@ComponentV2
struct ReusableFlowItem {
  @Require @Param reusableItem: ReusableData;
  @Param type: string = "";

  aboutToAppear() {
    console.error(`ReusableFlowItem aboutToAppear, reusableItem.val: ${this.reusableItem.val}`);
  }

  build() {
    Row({ space: 5 }) {
      Button("-").height(75).width(75)
      .onClick(() => {
        console.error(`ReusableFlowItem - clicked, current val: ${this.reusableItem.val}`);
        this.reusableItem.val -= 10;
      })
      Text(`${this.reusableItem.val}`).fontSize(36).fontColor(Color.White)
      Button("+").height(75).width(75)
      .onClick(() => {
        console.error(`ReusableFlowItem + clicked, current val: ${this.reusableItem.val}`);
        this.reusableItem.val += 10;
      })
    }
  }
}

@Entry
@ComponentV2
struct ParentGrid {
  @Local arrayHolder: GridArrayHolder = new GridArrayHolder(13);
  scroller: Scroller = new Scroller();

  @Local totalCount:number = this.arrayHolder.arr.length;


  build() {
    Column({ space: 5 }) {

      Grid(this.scroller) {
        Repeat(this.arrayHolder.arr)// @ts-ignore
          .virtualScroll({ totalCount: this.totalCount })
          .key((item, index) => `${index}-${JSON.stringify(item)}`)
          .each((ri) => {
            GridItem() {
                Text("ERROR")
            }
          })
          .template("small", (ri) => {
            GridItem() {
                ReusableFlowItem({ reusableItem: ri.item, type: "small" })
                .backgroundColor(Color.Red)
                .height(75)
            }
          })
          .template("ok", (ri) => {
            GridItem() {
                ReusableFlowItem({ reusableItem: ri.item, type: "ok" })
                .backgroundColor(Color.Green)
                .height(125)
            }
          })
          .template("big", (ri) => {
            GridItem() {
                ReusableFlowItem({ reusableItem: ri.item, type: "big" })
                .backgroundColor(Color.Blue)
                .height(175)
            }
          })
          .templateId((item, index) => {
            console.error(`templateId for index ${index}: item.val ${item.val}`);
            return item.val >= 100 ? "big" : item.val >= 75 ? "ok" : "small";
          })
      }
      .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 })
  }
}