/**
 * Legacy Repeat testcase with class objects
 *
 * Author: Vidhya Pria Arunkumar <vidhya.pria.arunkumar@huawei.com>
 *
 * Description:
 * This application demonstrates dynamic management of ClassA objects using various operations like adding, deleting,
 * updating, and swapping items. It utilizes a custom component for rendering items in a scrollable view.
 *
 * Classes:
 * - ClassA: Represents an object with properties including an auto-incremented id and a counter.
 *   - Constructor initializes ClassA with a counter value.
 *
 * Components:
 * - RepeatComp: Main component managing the list operations on ClassA objects.
 *   - Scrollable view with a Column layout.
 *   - Buttons for performing operations like adding, deleting, swapping, updating items in the list.
 *   - Repeat component iterates over the arr array of ClassA objects.
 *   - Each item displayed with its index, counter value, and buttons to increment its counter.
 *   - Operations include adding random items, shifting, swapping, updating, and deleting items.
 *   - Provides interactive demonstration of managing a dynamic list of objects.
 *
 * Usage:
 * - Click various buttons to perform operations on the list of ClassA objects.
 * - Scroll through the list to observe items and their corresponding index and counter values.
 * - Perform operations like adding, deleting, swapping, and updating items dynamically.
 */

let nextId : number = 0;

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

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

@Entry
@ComponentV2
struct RepeatComp {

  @Local arr : ClassA[] = [new ClassA (1), new ClassA (2), new ClassA (3)];
  @Local color : Color = Color.Green;
  @Local bgColor : Color = Color.White;

  build() {
    Scroll() {
      Column({space:10}) {

        Text("Testcase to test BASIC REPEAT OPTIONS")
        Text('----------------------------------')

          .fontSize(25)
        Repeat(this.arr)
          .each((i) => {
            Row() {
              Text(`  ${i.index}.`)             // binding to index
                .fontColor(this.color)

              Text(`- Item: ${i.item.counter}`)    // binding to object property of array item
                .width(150).height(40)
                .fontColor(this.color)

              Button("item.counter +1")
                .onClick(() =>  { i.item.counter+=1
                })
            }
            .backgroundColor(this.bgColor)   // binding to other state variable
          })
          .key((item) => `${item.id}`)

        Text('----------------------------------')

        Row({space:10}) {
          Button("Add arr")
            .onClick(() => {
              this.arr.push(new ClassA(this.arr.length));
            })

          Button("Shift arr")
            .onClick(() => {
              this.arr.shift();
            })

          Button("Swap arr1 & arr2")
            .onClick(() => {
              if(this.arr[1] && this.arr[2]) {
                let temp = this.arr[1];
                this.arr[1] = this.arr[2];
                this.arr[2] = temp;
              }
            })
        }

        Row({space:10}) {
          Button("Push 50 items in END")
            .onClick(() => {
              for (let i = 0; i < 50; i++) {
                this.arr.push(new ClassA(this.arr.length));
              }
            })

          Button("Update 50 items in BEGN")
            .onClick(() => {
              for (let i = 0; i < Math.min(50, this.arr.length); i++) {
                const randomValue = Math.floor(Math.random() * 100);
                this.arr[i] = new ClassA(randomValue);
              }
            })

        }

        Button("Delete and Add 10 Random Items")
          .onClick(() => {
            if (this.arr.length >= 10) {
              const indicesToDelete: number[] = [];

              while (indicesToDelete.length < 10) {
                const randomIndex = Math.floor(Math.random() * this.arr.length);

                // Check if the randomIndex is not already in indicesToDelete
                if (!indicesToDelete.includes(randomIndex)) {
                  indicesToDelete.push(randomIndex);
                }
              }

              // Sort the indices in descending order to avoid index shifting
              indicesToDelete.sort((a, b) => b - a);

              // Delete the items at the selected indices
              for (const index of indicesToDelete) {
                this.arr.splice(index, 1);
              }
            } else {
              console.log("There are fewer than 10 items in the array.");
            }
            //Add
            for (let i = 0; i < 10; i++) {
              const randomIndex = Math.floor(Math.random() * (this.arr.length + 1));
              const randomValue = Math.floor(Math.random() * 100);

              const newClassA = new ClassA(randomValue);
              // Insert at the randomIndex
              this.arr.splice(randomIndex, 0, newClassA);
            }

          })


        Button("Delete 10 and Add 20 Random Items")
          .onClick(() => {
            if (this.arr.length >= 10) {
              const indicesToDelete: number[] = [];

              while (indicesToDelete.length < 10) {
                const randomIndex = Math.floor(Math.random() * this.arr.length);

                // Check if the randomIndex is not already in indicesToDelete
                if (!indicesToDelete.includes(randomIndex)) {
                  indicesToDelete.push(randomIndex);
                }
              }

              // Sort the indices in descending order to avoid index shifting
              indicesToDelete.sort((a, b) => b - a);

              // Delete the items at the selected indices
              for (const index of indicesToDelete) {
                this.arr.splice(index, 1);
              }
            } else {
              console.log("There are fewer than 10 items in the array.");
            }

            //Add 20 items
            for (let i = 0; i < 20; i++) {
              const randomIndex = Math.floor(Math.random() * (this.arr.length + 1));
              const randomValue = Math.floor(Math.random() * 100);

              const newClassA = new ClassA(randomValue);

              // Insert at the randomIndex
              this.arr.splice(randomIndex, 0, newClassA);
            }

          })

      }
    }.scrollable(ScrollDirection.Vertical)
  }
}