/**
 * Repeat with Grid of Array elements
 *
 * Author: Vidhya Pria Arunkumar <vidhya.pria.arunkumar@huawei.com>
 *
 * Description:
 * This application demonstrates a grid layout with dynamic row management and interaction using a custom 
 * `Child` component. The grid items are dynamically added or removed, and the text of the grid items can be updated.
 *
 * Components:
 * - Child: Represents a row item with a label.
 *   - Displays an identifier and the label text.
 *   - Styled with specific width, height, font size, text alignment, and background color.
 * - GridExample: Main component managing the grid layout and row operations.
 *   - Contains buttons to add or delete rows and change the text of grid items.
 *   - Uses a `Grid` layout to display items created by the `Child` component.
 *   - Dynamically updates grid items based on the state of the application.
 *
 * Usage:
 * - Click "Change Child Text" to update the text of grid items.
 * - Click "push row" to add a new row to the grid.
 * - Click "Delete row" to remove the first row from the grid.
 */

@ComponentV2
struct Child {

  @Param @Require label : string[];

  build() {
    Row() {
        Repeat(this.label)
            .each((cell) => {
                Text(`-${cell.item}-`)
                .backgroundColor(0xFCF3CF)
                .height(40)
            })
            .key(cell => cell.toString())
    } .height(80)
  }
}



@Entry
@ComponentV2 
struct GridExample {
    nextRow : number = 1;

  @Local rows: string[] = [`${++this.nextRow}`, `${++this.nextRow}` ];
  @Local totalCount:number = this.rows.length;

  @Local labelText : string = "";

  build() {
    Column({ space: 10 }) {
        Text('REPEAT WITH GRID ITEMS')
        Row() {

                Button("Change Child Text")
                    .onClick(() => {
                    console.log("change: grid color - start");
                    this.labelText = this.labelText+'-A';
                    console.log("change: grid color - emd");
                    })
        }
        Row() {
              Button("push row")
                    .onClick(() => {
                    this.rows.push(`${++this.nextRow}`)
                    this.totalCount = this.rows.length;
                    })

                Button("Delete row")
                    .onClick(() => {
                        this.rows.splice(0, 1);
                         this.totalCount = this.rows.length;
                    })
        }
        
      Grid() {
        Repeat(this.rows) 
        .virtualScroll({
            totalCount: this.totalCount
        })
        .templateId((item:string, index:number) => {
            return index % 2 ? 'font-32' : 'something-wrong';
        })
        .template("font-32", (row) => {
            GridItem() {
              Child({ label: [`${row.item}-0-T-${this.labelText}`] });
            }
            .width('95%')
            .height(80)
            .backgroundColor(0xF4D03F)

        })

        .each((row) => {
            GridItem() {
              Child({ label: [`${row.item}-1-E-${this.labelText}`] });
            }
            .width('95%')
            .height(80)
            .backgroundColor(0x0AAA58)
        })
      }
      .columnsTemplate('1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .width('90%')
      .backgroundColor(0xAA580A)
      .height(300)
    }
        .width('100%').margin({ top: 5 })
  }
}