/**
 * Dynamic Management of ClassA Objects in a Shared Array
 *
 * Author: Vidhya Pria Arunkumar <vidhya.pria.arunkumar@huawei.com>
 *
 * Description:
 * This testcase demonstrates the usage of sharing a common array across two Repeat items
 *
 * Classes:
 * - ClassA: Represents an object with an auto-incremented id and a counter.
 *   - Constructor initializes the ClassA instance with a counter value.
 *
 * Components:
 * - RepeatComp: Main component managing the list operations on ClassA objects.
 *   - Scrollable view with a Column layout containing two separate Repeat lists sharing the same array.
 *   - Buttons for performing operations like adding, deleting, swapping, and updating items in the list.
 *   - Repeat components iterate over the arr array of ClassA objects, displaying each item's index and counter value
 *      with buttons to increment the counter.
 *
 * Usage:
 * - Click various buttons to perform operations on the shared list of ClassA objects.
 * - Scroll through both Repeat lists to observe items and their corresponding index and counter values.
 * - Perform dynamic operations like adding items to the beginning or end, deleting, swapping, and updating items in the shared array.
 */

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: number[] = [1, 2, 2];
  @Local totalCount:number = this.arr.length;

  scroller: Scroller = new Scroller();

  build() {
    Column({space:10}) {
      Text('TWO REPEAT LISTS WITH SHARED ARRAY')
        .fontSize(20)

      Row() {
        Column({space:10}) {

          Text("REPEAT 1")
          Text('-------')

          List({ space: 5, scroller:this.scroller }) {

            Repeat(this.arr)
              .virtualScroll({
                totalCount: this.totalCount
              })
              .templateId((item:number, index:number) => {
                return index % 2 ? 'font-32' : 'something-wrong';
              })
              .template("font-32", (i) => {
                ListItem() {
                  Row({space:5}) {
                    Text(`  ${i.index}.`)             // binding to index
                    Text(`- Item: ${i.item}`)    // binding to object property of array item
                    Button("item +1")
                      .onClick(() =>  { 
                        //this.arr[i.index]++;
                        i.item++;
                      })
                  }
                }.border({width:1})
                .backgroundColor(0xFFA000)

              }, { cachedCount: 5 })

              .each((i) => {
                ListItem() {
                  Row({space:5}) {
                    Text(`  ${i.index}.`)             // binding to index
                    Text(`- Item: ${i.item}`)    // binding to object property of array item

                    Button("item +1")
                      .onClick(() =>
                      { 
                        //this.arr[i.index]++;
                        i.item++;
                      })
                  }
                }.border({width:1})
                .backgroundColor(0x00FFA0)

              })
          }.height('100%')
        }.width('50%')
        .height('70%')

        Column({space:10}) {

          Text("REPEAT 2")
          Text('-------')
          List({ space: 5, scroller:this.scroller }) {

            Repeat(this.arr)
              .virtualScroll({
                totalCount: this.totalCount
              })
              .templateId((item:number, index:number) => {
                return index % 2 ? 'font-32' : 'something-wrong';
              })
              .template("font-32", (i) => {
                ListItem() {
                  Row({space:5}) {
                    Text(`  ${i.index}.`)             // binding to index
                    Text(`- Item: ${i.item}`)    // binding to object property of array item
                    Button("item +1")
                      .onClick(() =>  { 
                        //this.arr[i.index]++;
                        i.item++;
                      })
                  }
                }.border({width:1})
                .backgroundColor(0xFFA000)

              }, { cachedCount: 5 })

              .each((i) => {
                ListItem() {
                  Row({space:5}) {
                    Text(`  ${i.index}.`)             // binding to index
                    Text(`- Item: ${i.item}`)    // binding to object property of array item
                    Button("item +1")
                      .onClick(() =>  { 
                        //this.arr[i.index]++;
                        i.item++;
                      })
                  }
                }.border({width:1})
                .backgroundColor(0x00FFA0)
              })
          }.height('100%')
        }.width('50%')
        .height('70%')
      }.height('75%')

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

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

          })

        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("Add 10 items in BEGIN")
          .onClick(() => {
            for (let i = 0; i < 10; i++) {
              this.arr.unshift(this.arr.length);
            }
            this.totalCount = this.arr.length;

          })

        Button("Add 10 items in END")
          .onClick(() => {
            for (let i = 0; i < 10; i++) {
              this.arr.push(this.arr.length);
            }
            this.totalCount = this.arr.length;

          })

      }
    }

  }
}