/**
 * Test Application: Grid based Nested Repeat with Object Types
 *
 *  Author: Vidhya Pria Arunkumar <vidhya.pria.arunkumar@huawei.com>
 *
 * Description:
 * This test application demonstrates the use of nested Repeat components with objects in Grid container.
 The main features include:
 * - Rendering a matrix (2D array) of objects using nested Repeat components.
 * - 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;
  }
}

@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(11), new ClassA(12), new ClassA(13)),
    new ObservedArray<ClassA>(new ClassA(21), new ClassA(22), new ClassA(23))
  );

  @Local totalCount : number = 3; //this.matrix1.length;
  scroller: Scroller = new Scroller();

  build() {
    Column({space:10}) {
      Text("BRID - NESTED REPEAT WITH OBJECTS")
        .fontSize(25)

      Grid() {

        Repeat(this.matrix1)
          .virtualScroll({
            totalCount: this.totalCount
          })
          .templateId((item:ObservedArray<ClassA>, index:number) => {
            return index % 2 ? 'font-32' : 'something-wrong';
          })
          .template("font-32", (obj) => {
            GridItem() {
              Row() {
                Repeat(obj.item)
                  .each((cell) => {
                    Text(`-${(cell.item as ClassA).counter}-`)
                  })
                  .key(cell => JSON.stringify(cell))
              }
            }            .height(80)
            .backgroundColor(0x0AAA58)

          })

          .each((obj) => {
            GridItem() {
              Row() {
                Repeat(obj.item)
                  .each((cell) => {
                    Text(`-${(cell.item as ClassA).counter}-`)
                  })
                  .key(cell => JSON.stringify(cell))
              }
            }            .height(80)
            .backgroundColor(0x0AAA58)

          })
          .key(row => JSON.stringify(row))

      } .columnsTemplate('1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .width('90%')
      .backgroundColor(0xAA580A)
      .height(300)

      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;

        })

      Button("Shift element")
        .onClick(() => {
          this.matrix1.shift();
          this.totalCount = this.matrix1.length;

        })

      Button("UnShift element")
        .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.unshift(newRow);
          this.totalCount = this.matrix1.length;

        })

    }
  }
}