/**
  Performance test results (rk-board), 10.01.24

  1. Add 50 items (numbers) 4 times
  Repeat : 185...255 ms
  ForEach: 110...133 ms

  2. Update 50 items of 200 items (numbers)
  Repeat : 105..115 ms
  ForEach: 125..132 ms

  3. Delete 50 items of 200 (4 times)
  Repeat : 283, 219, 119, 25 ms
  ForEach: 18, 13, 6, 0.6 ms
*/

/**
  Test setup (rk-board, ohos build from 08.01)
  - List items are numbers (always unique)
  - Key-gen and item-gen doesn't use index, keygen is json.stringify(item)
  - As devication of measurements was hight, each repetition was repeated 3-5 times

ViewPU.forEachUpdateFunction
  238..272 / 220...237 / 2,6..9,7

Repeat.render
  Create 5x50: 286..318
  Update 61..96 / 67..161 

    | Create 5x50 items | ForEach   | Repeat   |
    |-------------------|-----------|----------|
    | +50 items         |  582..635 | 607..650 | 
    | +50 items         |  601..633 | 638..657 |
    | +50 items         |  630..658 | 660..682 |
    | +50 items         |  631..658 | 683..697 |
    | +50 items         |  631..704 | 682..707 |


    | Update 50 items   | ForEach   | Repeat   |
    |-------------------|-----------|----------|
    |                   |  704..792 | 256..312 |

    | Delete 4x50 items | ForEach   | Repeat   |
    |-------------------|-----------|----------|
    | -50 items         |  262..291 | 283..302 |
    | -50 items         |  219..232 | 203..181 |
    | -50 items         |  166..186 | 150..181 |
    | -50 items         |  125..128 | 112..126 |


           |   Prepend 50 items | Delete 50 items | Update 50 items
  ----------
  ForEach  |
  Repeat   |   650,653,665                          329


  |   |  create object(10/100/1000 keys) | set+get (100K repeats)  |
  |---|---|---|
  | Proxy + Reflect APIs  | 0.039 ms / 0.036 ms /  0.049 ms  | ~1200 ms  |
  | Object.defineProperty | 0.270 ms / 1.478 ms / 30.591 ms  | ~640 ms   |


 */

//declare const aceTrace : AceTrace;

const ITEMS_PER_OP = 50;

@ComponentV2
struct MyForEachComp {
  @Local arr: number[] = [];
  base: number = 0;
  // for measurements
  @Local timeStart: number = 0;
  @Local timeEnd: number = 0;

  build() {
    Column(space:5) {
      Text("FOREACH UPDATE.")
      Text(`delay:${this.timeEnd - this.timeStart} cnt:${this.arr.length}`)

      Scroll() {
        Column() {
          ForEach(this.arr,
            (row, index) => {
              Row() {
                // something heavy to render
                Text("😐")
                Text("😐")
                Text("😐")

                // added background to make area-change visible
                Text(`${row}`).backgroundColor(0xeeeeee)
                  .onAreaChange(() => {
                    this.timeEnd = Date.now();
                    aceTrace.begin('MyForEach ACE_TRACE END')
                    aceTrace.end()
                  })
              }
              .width('90%').border({width:1})
            },
            row => "Id_" + JSON.stringify(row)
          )
        }

      }.scrollable(ScrollDirection.Vertical)
      .height(500)

      Button(`Add ${ITEMS_PER_OP} Uniq Rows`)
      .onClick(() => {
        this.timeStart = this.timeEnd = Date.now()
        for (let i = 0; i < ITEMS_PER_OP; i++) {
          this.arr.unshift( this.base + i );
        }
        this.base += ITEMS_PER_OP
        aceTrace.begin('MyForEach ACE_TRACE BEGIN')
        aceTrace.end()
      })

      Button(`Update First ${ITEMS_PER_OP} Rows`)
      .onClick(() => {
        this.timeStart = this.timeEnd = Date.now()
        for (let i = 0; i < Math.min(ITEMS_PER_OP, this.arr.length); i++) {
          this.arr[i] = -this.arr[i]
        }
        aceTrace.begin('MyForEach ACE_TRACE BEGIN')
        aceTrace.end()
      })

      Button(`Delete First ${ITEMS_PER_OP} Rows`)
      .onClick(() => {
        this.timeStart = this.timeEnd = Date.now()
        this.arr.splice(0, ITEMS_PER_OP); // Remove elements from the beginning
        aceTrace.begin('MyForEach ACE_TRACE BEGIN')
        aceTrace.end()
      })
    }

  }

}

function logme(...args) {
  console.log.call(console, ...args); return "";
}

@ComponentV2
struct MyRepeatComp {
  @Local arr: number[] = [];
  base: number = 0;
  // for measurements
  @Local timeStart: number = 0;
  @Local timeEnd: number = 0;

  build() {
    Column(space:5) {
      Text("REPEAT UPDATE")
      Text(`delay:${this.timeEnd - this.timeStart} cnt:${this.arr.length}`)

      Scroll() {
        Column() {
          Repeat(this.arr)
            .each((row) => {
              Row() {
                // something heavy to render
                Text("😐")
                Text("😐")
                Text("😐")

                // added background to make area-change visible
                Text(`${row.item}`).backgroundColor(0xeeeeee)
                  .onAreaChange(() => {
                    this.timeEnd = Date.now();
                    aceTrace.end()
                  })
              }
              .width('90%').border({width:1})
            })
            .key(row => "Id_" + JSON.stringify(row))
        }

      }.scrollable(ScrollDirection.Vertical)
      .height(500)

      Button(`Add ${ITEMS_PER_OP} Uniq Rows`)
      .onClick(() => {
        this.timeStart = this.timeEnd = Date.now()
        for (let i = 0; i < ITEMS_PER_OP; i++) {
          this.arr.unshift( this.base + i );
        }
        this.base += ITEMS_PER_OP
        aceTrace.begin('MyRepeatComp ACE_TRACE BEGIN')
      })

      Button(`Update First ${ITEMS_PER_OP} Rows`)
      .onClick(() => {
        this.timeStart = this.timeEnd = Date.now()
        for (let i = 0; i < Math.min(ITEMS_PER_OP, this.arr.length); i++) {
          this.arr[i] = -this.arr[i]
        }
        aceTrace.begin('MyRepeatComp ACE_TRACE BEGIN')
      })

      Button(`Delete First ${ITEMS_PER_OP} Rows`)
      .onClick(() => {
        this.timeStart = this.timeEnd = Date.now()
        this.arr.splice(0, ITEMS_PER_OP);
        aceTrace.begin('MyRepeatComp ACE_TRACE BEGIN')
      })
    }
  }
}

@Entry
@ComponentV2
struct ParentComp {
  build() {
    Row() {
      Column() {
        MyForEachComp()
      }.width('50%')
      Column() {
        MyRepeatComp()
      }.width('50%')
    }  
  }
}