/**
 * Test Application: List of Repeat Items with Custom Component of Simple Types
 *
 * Author: Vidhya Pria Arunkumar <vidhya.pria.arunkumar@huawei.com>
 *
 * Description:
 * This test application demonstrates the use of the Repeat component with a custom component (ItemComponent) for simple types.
 * The main features include:
 * - Rendering a list of numbers using the Repeat component.
 * - Utilizing a custom component to display each item.
 * - Providing buttons to update, swap, add, and delete items in the list.
 *
 * Components:
 * - ItemComponent: A custom component that takes a string parameter and displays it in a Text component.
 *   - s: A string parameter required for the ItemComponent.
 *
 * - RepeatComp: The main component that manages an array of numbers and provides UI elements to interact
 *   with the list.
 *   - The array is displayed using the Repeat component within a List.
 *   - Button("Update last item"): Increments the value of the last item in the list.
 *   - Button("Swap first and last item"): Swaps the first and last items in the list.
 *   - Button("Add Row"): Adds a new item to the end of the list.
 *   - Button("Delete Index 0"): Removes the first item from the list.
 *
 * Usage:
 * - The initial list of numbers is [0, 1, 2, 3].
 * - Click "Update last item" to increment the value of the last item in the list.
 * - Click "Swap first and last item" to swap the values of the first and last items in the list.
 * - Click "Add Row" to add a new item to the end of the list with a value equal to the current length of the list.
 * - Click "Delete Index 0" to remove the first item from the list.
 *
 * Note:
 * - This test case is used to observe the rendering behavior of the Repeat component with a custom component for simple
 *   types and how changes in the data affect the rendering process.
 */


@ComponentV2
struct ItemComponent {
  @Param @Require s : string;

  build() {
    Text(this.s)
      .width(200).height(40)
  }
}

@Entry
@ComponentV2
struct RepeatComp {

  @Local arr : number[] = [0, 1, 2, 3];
  @Local totalCount:number = this.arr.length;
  scroller: Scroller = new Scroller();

  build() {
    Column({space:10}) {
      Text("Repeat with Custom Comp of Simple Types")
        .fontSize(25)
      if (this.arr.length) {
        ItemComponent({s : `non-repeated #0: ${this.arr[0]}`})
      }
      List({ space: 3, scroller:this.scroller }) {

        Repeat(this.arr)

          .each((item) => {
            ListItem() {
              Row() {
                ItemComponent({s : `Item: ${item.item}` })
              }
            }
          })
      }.height('50%')
      .onScrollIndex((start, end) => {
        console.log('onScrollIndex', start, end);
      })

      if (this.arr.length) {
        ItemComponent({ s: `non-repeated #last: ${this.arr[this.arr.length-1]}` })
      }

      Button(`Update last item`)  // updating item after swap causes crash
        .onClick(() => {
          console.log("Update array: "+this.arr[this.arr.length-1]);
          this.arr[this.arr.length-1] = this.arr[this.arr.length-1] + 1;
        })

      Button(`Swap first and last item`)
        .onClick(() => {
          console.log("Update array");
          const first = this.arr[0];
          this.arr[0] = this.arr[this.arr.length-1];
          this.arr[this.arr.length-1] = first;
        })

      Button("Add Row")
        .onClick(() => {
          console.log("Add Row called with :",this.arr.length);
          this.arr.push(this.arr.length);
        })

      Button("Delete Index 0")
        .onClick(() => {
          console.log("Delete Arr 0 called");
          this.arr.splice(0, 1); // Remove one element at index i
        })
    }
  }
}