/**
 * Test Application: WaterFall based Repeat of Nested Items of Simple Type
 *
 * Author: Vidhya Pria Arunkumar <vidhya.pria.arunkumar@huawei.com>
 *
 * Description:
 * This test application demonstrates the use of the WaterFall container with Repeat component
 *  to render nested arrays
 * of simple types (numbers) in a structured format. The main features include:
 * Notice the automatic addition of elements in waterfall on reaching end of the waterfall container
 * Also elements are automatically added to the beginning of container on reaching the top of the container
 * - 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.
 *
 */

function addRowAtStart(matrix: Array<Array<number>>, startValue: number): Array<Array<number>> {
  const newRow = [beginValue, beginValue - 1, beginValue - 2];
  return [newRow, ...matrix];
}
let beginValue = -11;

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

@Entry
@ComponentV2
struct RepeatComponent {
  @Local matrix : Array<Array<number>> = [[ 1, 2, 3 ], [ 11, 12, 13 ], [21, 22, 23], [31, 32, 33 ],[41, 42, 43 ],
                                        [51, 52, 53 ], [61, 62, 63 ], [71, 72, 73 ], [81, 82, 83 ]];
  @Local totalCount:number = this.matrix.length;
  scroller: Scroller = new Scroller();

  // 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.`

  @Builder
  footerItem() {
    Column() {
      Text('footer')
    }.width('100%')
  }
  build() {
    Column({space:10}) {
      Text("WATERFALL NESTED REPEAT OF SIMPLE ITEMS")
        .fontSize(25)

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

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

      }.height('60%')
      .onReachEnd(() => {
        this.matrix = addRow(this.matrix, startValue);
        startValue += 10;
        this.totalCount = this.matrix.length;
      })
      .onReachStart(() => {
        this.matrix = addRowAtStart(this.matrix, beginValue);
        beginValue -= 10;
        this.totalCount = this.matrix.length;
      });

      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;
        })
    }
  }
}