var nextId = 1;

function getRand(): number {
    return Math.floor(Math.random() * 100);
}

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

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

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

@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 arrayHolder1: GridArrayHolder = new GridArrayHolder(5);
  @Local arrayHolder2: GridArrayHolder = new GridArrayHolder(3, true);
  scroller: Scroller = new Scroller();

  @Computed get totalCount(): number { return this.switch ? this.arrayHolder1.arr.length : this.arrayHolder2.arr.length; };
  @Local switch: boolean = true;
  @Local renderCount: number = 0;

  countRender<T>(arr: T[]) {
    this.renderCount++;
    return arr;
  }

  build() {
    Column({ space: 5 }) {
      Button(`Switch (using ${this.switch ? 1 : 2})`).width(350).height(75)
      .onClick(() => {
        console.error("HENNAN DEBUG --- switch clicked");
        this.switch = !this.switch;
        console.error("HENNAN DEBUG --- switch clicked end");
      })

      Row() {
        Button("arr1: upd [1]")
        .onClick(() => {
          console.error("HENNAN DEBUG --- upd [1] clicked");
          this.arrayHolder1.arr[1].val += 5;
          console.error("HENNAN DEBUG --- upd [1] clicked end");
        })
        Button("arr1: push")
        .onClick(() => {
          console.error("HENNAN DEBUG --- push clicked");
          this.arrayHolder1.arr.push(new ReusableData(getRand()));
          console.error("HENNAN DEBUG --- push clicked end");
        })
        Button("arr2: upd [1]")
        .onClick(() => {
          console.error("HENNAN DEBUG --- upd [1] clicked");
          this.arrayHolder2.arr[1].val += 5;
          console.error("HENNAN DEBUG --- upd [1] clicked end");
        })
        Button("arr2: push")
        .onClick(() => {
          console.error("HENNAN DEBUG --- push clicked");
          this.arrayHolder2.arr.push(new ReusableData(getRand()));
          console.error("HENNAN DEBUG --- push clicked end");
        })
      }
      Grid(this.scroller) {
        Repeat(this.countRender(this.switch ? this.arrayHolder1.arr : this.arrayHolder2.arr))// @ts-ignore
          .virtualScroll({ totalCount: this.totalCount })
          .key((item, index) => item.id.toString())
          .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)

      Text(`Repeat render count: ${this.renderCount}`).fontSize(30)
      Button('next page')
        .onClick(() => {
          this.scroller.scrollPage({ next: true })
        })
    }.width('100%').margin({ top: 5 })
  }
}