/**
 *  List of Repeat items with virtualScroll and templates
 *
 *  Author: Vidhya Pria Arunkumar <vidhya.pria.arunkumar@huawei.com>
 *
 * Description:
 * This application showcases a list of vehicles with dynamically changing prices using
 * custom classes and components.
 *
 * Classes:
 * - VehicleData: Represents a vehicle with properties including id, name, price, and intakeValue (used for dynamic pricing).
 *   - Constructor initializes a vehicle with a name and price, assigning a unique id.
 *   - addPrice(): Method to increment the intakeValue based on the vehicle's price.
 *
 * - VehicleDB: Represents a database of VehicleData objects initialized with default vehicle entries.
 *   - vehicleItems: Array holding instances of VehicleData.
 *
 * Components:
 * - entryComp: Main component managing the list of VehicleData.
 *   - Buttons to delete the first and last vehicles from the list.
 *   - Button to increment the intakeValue of all vehicles based on their prices.
 *   - List with virtual scrolling displaying vehicles using Repeat and custom ListItem components.
 *     - Differentiates rendering using templateId and template based on index parity.
 *     - Each vehicle displayed with its name and dynamically calculated intakeValue.
 *
 * Usage:
 * - Click "Del First" or "Del Last" buttons to remove vehicles from the list.
 * - Click "Change price" to update the intakeValue of all vehicles based on their prices.
 * - Scroll through the list to observe virtual scrolling behavior with dynamically rendered components.
 */


let NextId = 1;

@ObservedV2 class VehicleData {
  @Trace id: string;
  @Trace name: string;
  @Trace price: number;
  @Trace intakeValue: number = 0;

  constructor(name: string, price: number) {
    this.id = `${NextId++}`;
    this.name = name;
    this.price = price;
  }

  public addPrice() : void {
    this.intakeValue += this.price;
  }
}

@ObservedV2 class VehicleDB {
  // public VehicleData[] will be updated from outside
  public vehicleItems : VehicleData[];

  constructor() {
    // init with a default value
    this.vehicleItems = [
      new VehicleData("Toyota Corolla", 20000),
      new VehicleData("Honda Civic", 22000),
      new VehicleData("Ford F-150", 30000),
      new VehicleData("Tesla Model 3", 35000),
      new VehicleData("Chevrolet Silverado", 32000),
      new VehicleData("BMW 3 Series", 40000),
      new VehicleData("Audi A4", 42000),
      new VehicleData("Mercedes-Benz C-Class", 45000),
      new VehicleData("Nissan Altima", 24000),
      new VehicleData("Hyundai Elantra", 20000),
      new VehicleData("Kia Optima", 23000)
    ];
  }
}

@Entry
@ComponentV2
struct entryComp {
  @Local vehicleItems: VehicleData[] = new VehicleDB().vehicleItems;

  @Local totalCount:number = this.vehicleItems.length;
  scroller: Scroller = new Scroller();

  build() {
    Column({space: 3}) {
      Row() {
        Button("Del First").onClick(()=>{
          this.vehicleItems.shift();
          this.totalCount -= 1;
        })
        Button("Del Last").onClick(()=>{
          this.vehicleItems.pop();
          this.totalCount -= 1;
        })
      }
      Button("Change price")
        .onClick(() => {
          console.log("TotalCount: ", this.totalCount);
          console.log("vehicleItems length: ", this.vehicleItems.length);
          this.vehicleItems.forEach(item => item.addPrice());
        })

      List({ scroller:this.scroller }) {
        Repeat(this.vehicleItems)
          .virtualScroll({
            totalCount: this.totalCount
          })
          .templateId((item:VehicleData, index:number) => {
            return index % 2 ? 'font-32' : 'something-wrong';
          })
          .template("font-32", (ri) => {
            ListItem() {
              Text("Vehicle: " + `${ri.item.name} \n price: ${ri.item.intakeValue} $`)
                .width('90%')
                .height(160)
                .backgroundColor(0xFFA07A)
                .textAlign(TextAlign.Center)
                .fontSize(30)
                .fontWeight(FontWeight.Bold)
            }.border({width:1})
          }, { cachedCount: 5 })

          .each((ri) => {
            ListItem() {
              Text("Vehicle: " + `${ri.item.name} \n price: ${ri.item.intakeValue} $`)
                .width('90%')
                .height(160)
                .backgroundColor(0xccff99)
                .textAlign(TextAlign.Center)
                .fontSize(30)
                .fontWeight(FontWeight.Bold)
            }.border({width:1})
          })
          .key((item, index) =>  {
            const k = `${index}:${item}`;
            return k;
          })
      }.height('100%')
      .onScrollIndex((start, end) => {
        console.log('onScrollIndex', start, end);
      })
    }
  }
}