/**
 * Test Application: Nested Repeat with Object Types
 *
 *  Author: Vidhya Pria Arunkumar <vidhya.pria.arunkumar@huawei.com>
 *
 * Description:
 * This test application demonstrates the use of Waterfall based nested Repeat components with objects. 
 * The main features include:
 * - Rendering a matrix (2D array) of objects using nested Repeat components.
 * - Automatic addition of elements happen onReachEnd and onReachStart of Waterfall list 
 * - Observing changes to objects and their properties using the @ObservedV2 and @Trace decorators.
 * - Updating specific rows and cells within the matrix and observing the re-render behavior.
 *
 * Classes:
 * - ObservedArray<T>: An observed array class that extends the standard Array class to enable observation of changes.
 * - ClassA: A class representing an item with a unique ID and a counter property that can be traced for changes.
 *   - id: A unique identifier for each instance.
 *   - counter: A numeric property of the item.
 *
 * Components:
 * - RepeatComp: A component that maintains a matrix of ClassA objects and includes buttons to update specific rows
 *   and cells within the matrix.
 *   - The matrix is displayed using nested Repeat components.
 *   - Button("Update Row[0] with +1"): Increments the counter of each item in the first row by 1.
 *   - Button("Update Row[1][1] with +1"): Increments the counter of the item at position [1][1] by 1.
 *
 * Usage:
 * - Click "Update Row[0] with +1" to increment each counter in the first row by 1.
 * - Click "Update Row[1][1] with +1" to increment the counter of the item at position [1][1] by 1.
 * - Click "Add Row" to add a new row to the existing List
 *
 * Note:
 * - This test case is used to observe the rendering behavior of nested Repeat components with observed object types
 *   and how changes in the data affect the rendering process.
 *
 *  Author: vidhya.pria.arunkumar@huawei.com
 */

let nextId : number = 0;

@ObservedV2 class ObservedArray<T> extends Array<T> {

}

@ObservedV2 class ClassA {
  id : number = nextId++;
  @Trace counter : number;

  constructor(c : number) {
    this.counter = c;
  }
}

let startValue = -1;

@Entry
@ComponentV2
struct RepeatComp {

  @Local matrix1: ObservedArray<ObservedArray<ClassA>> = new ObservedArray<ObservedArray<ClassA>>(
    new ObservedArray<ClassA>(new ClassA(1), new ClassA(2), new ClassA(3)),
    new ObservedArray<ClassA>(new ClassA(2), new ClassA(3), new ClassA(4)),
    new ObservedArray<ClassA>(new ClassA(3), new ClassA(4), new ClassA(5)),
    new ObservedArray<ClassA>(new ClassA(4), new ClassA(5), new ClassA(6)),
    new ObservedArray<ClassA>(new ClassA(5), new ClassA(6), new ClassA(7)),
    new ObservedArray<ClassA>(new ClassA(6), new ClassA(7), new ClassA(8)),
    new ObservedArray<ClassA>(new ClassA(7), new ClassA(8), new ClassA(9)),
    new ObservedArray<ClassA>(new ClassA(8), new ClassA(9), new ClassA(10)),
    new ObservedArray<ClassA>(new ClassA(9), new ClassA(10), new ClassA(11))
  );

  @Local totalCount : number = 3; //this.matrix1.length;
  scroller: Scroller = new Scroller();
  @Builder
  footerItem() {
    Column() {
      Text('footer')
    }.width('100%')
  }
  build() {
    Column({space:10}) {
      Text("WATERFALL BASED NESTED REPEAT OF OBJECTS")
        .fontSize(30)
        .backgroundColor(0xBCFF000)


      WaterFlow({ scroller: this.scroller, footer: this.footerItem.bind(this) }) {

        Repeat(this.matrix1)
          .virtualScroll({
            totalCount: this.totalCount
          })
          .each((obj) => {
            FlowItem() {
              Row() {
                Repeat(obj.item)
                  .each((cell) => {
                    Text(`  ${(cell.item as ClassA).counter}  `)
                      .fontSize(25)
                      .border({width:1})
                  })
                  .key(cell => JSON.stringify(cell))
              }
            }
          })
          .key(row => JSON.stringify(row))

      }.height('60%')
      .onReachEnd(() => {
        const lastRow = this.matrix1[this.matrix1.length - 1];
        const newRow = new ObservedArray<ClassA>(
          new ClassA(lastRow[0].counter + 10),
          new ClassA(lastRow[1].counter + 10),
          new ClassA(lastRow[2].counter + 10)
        );
        this.matrix1.push(newRow);
        this.totalCount = this.matrix1.length;

      })
      .onReachStart(() => {
        const newRow = new ObservedArray<ClassA>(
          new ClassA(startValue),
          new ClassA(startValue - 1),
          new ClassA(startValue - 2)
        );
        this.matrix1.unshift(newRow);
        startValue -= 10;
        this.totalCount = this.matrix1.length;
      });

      Button("Update Row[0] with +1 ")
        .onClick(() => {
          console.log("Update Row called");
          this.matrix1[0] = new ObservedArray<ClassA>(new ClassA(this.matrix1[0][0].counter + 1),
            new ClassA(this.matrix1[0][1].counter + 1),
            new ClassA(this.matrix1[0][2].counter + 1));
        })

      Button("Update Row[1][1] with +1 ")
        .onClick(() => {
          console.log("Update Row called");
          this.matrix1[1][1] = new ClassA(this.matrix1[1][1].counter+1);
          this.totalCount = this.matrix1.length;

        })

      Button("Add new Row")
        .onClick(() => {
          const newRow = new ObservedArray<ClassA>(
            new ClassA(this.matrix1[this.matrix1.length-1][0].counter+1),
            new ClassA(this.matrix1[this.matrix1.length-1][1].counter+1),
            new ClassA(this.matrix1[this.matrix1.length-1][2].counter+1),
          );
          this.matrix1.push(newRow);
          this.totalCount = this.matrix1.length;

        })
    }
  }
}