/**
 * Test Application: Repeat with Grid based Nested Items of Simple Type
 *
 * Author: Vidhya Pria Arunkumar <vidhya.pria.arunkumar@huawei.com>
 *
 * Description:
 * This test application demonstrates the use of the Repeat component to render nested arrays
 * of simple types (numbers) in a structured format. The main features include:
 * - Rendering a matrix of numbers using nested Repeat components.
 * - Updating a specific row in the matrix and observing the re-render behavior.
 * - Adding a new row to the matrix and dynamically updating the displayed content.
 *
 * Functions:
 * - addRow(matrix: Array<Array<number>>, startValue: number): Adds a new row to the matrix
 *   with sequential numbers starting from the provided startValue.
 *
 * Components:
 * - ForEachComponent: A component that maintains a matrix of numbers and includes buttons
 *   to update a specific row or add a new row to the matrix.
 *   - The matrix is displayed using nested Repeat components.
 *   - Button("upd Row[1]"): Updates the second row of the matrix.
 *   - Button("Add Row"): Adds a new row to the matrix with sequential numbers starting from 51.
 *
 * Usage:
 * - Click "upd Row[1]" to increment each number in the second row by 10.
 * - Click "Add Row" to add a new row to the matrix with incremented values.
 *
 * Note:
 * - This test case is used to observe the rendering behavior of nested Repeat components
 *   and how changes in the data affect the rendering process.
 *
 */


// Testcase to test Repeat with nested items of simple type

function addRow(matrix: Array<Array<number>>, startValue: number): Array<Array<number>> {
  const newRow = [startValue, startValue + 1, startValue + 2];
  return [...matrix, newRow];
}

let startValue = 51;


@Entry
@ComponentV2
struct RepeatComponent {
  @Local matrix : Array<Array<number>> = [[ 11, 12, 13 ], [21, 22, 23], [31, 32, 33 ],[41, 42, 43 ]];
  @Local totalCount:number = this.matrix.length;

  // Update Row[1] requires the outer Repeat to re-render because of id change
  // update Cell[1][1] should not require outer Repeat to re-render, observing changes of `row`
  //  array(Object!) should trigger inner Repeat to re-render.`

  build() {
    Column({space:10}) {
      Text("GRID - NESTED REPEAT WITH SIMPLE ITEMS")
        .fontSize(25)

      Grid() {

        Repeat(this.matrix)
          .virtualScroll({
            totalCount: this.totalCount
          })
          .templateId((item:number[], index:number) => {
            return index % 2 ? 'font-32' : 'something-wrong';
          })
          .template("font-32", (row) => {
            GridItem() {
              Repeat(row.item)
                .each((cell) => {
                  Text(`-${cell.item}-`)
                    .backgroundColor(0xFCF3CF)
                    .height(40)
                })
            }
            .width('95%')
            .height(80)
            .backgroundColor(0xF4D03F)

          })
          .each((row) => {
            GridItem() {
              Repeat(row.item)
                .each((cell) => {
                  Text(`-${cell.item}-`)
                    .backgroundColor(0xEDBB99)
                    .height(80)
                })
            }
            .width('95%')
            .height(80)
            .backgroundColor(0x0AAA58)
          })
      }
      .columnsTemplate('1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .width('90%')
      .backgroundColor(0xAA580A)
      .height(300)

      Button("upd Row[1]")
        .onClick(() => {
          console.log("Update Matrix called");
          this.matrix[1] = [this.matrix[1][0]+10, this.matrix[1][1]+10, this.matrix[1][2]+10]
        })

      Button("Add Row")
        .onClick(() => {
          this.matrix = addRow(this.matrix, startValue);
          startValue += 10;
          this.totalCount = this.matrix.length;
        })

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

      Button("UnShift element")
        .onClick(() => {
          const newRow = [startValue, startValue + 1, startValue + 2];
          startValue += 10;
          this.matrix.unshift(newRow);
          this.totalCount = this.matrix.length;

        })


    }
  }
}