export default class OrderCard extends LightningElement {
  orderTotal = 1000;  // reactive property

  handleDiscount() {
    this.orderTotal = 800;  // CHANGE detected → template re-renders
    // Anywhere {orderTotal} appears in the HTML automatically updates to 800
  }
}

// The "magic" is just: LWC watches this.propertyName assignments
// and re-runs the template wherever that property is referenced

export default class OrderCard extends LightningElement {
  orderName = 'Order #1001';  // reactive — no decorator needed
  orderTotal = 1000;           // reactive — no decorator needed
  isUrgent = false;             // reactive — no decorator needed

  handleUpdate() {
    this.orderTotal = 1200;  // template updates automatically
    this.isUrgent = true;     // template updates automatically
  }
}
// All three fields above are "reactive properties" with zero decorators

export default class OrderCard extends LightningElement {
  order = { Name: 'Order #1', Amount: 500 };

  handleUpdate() {
    this.order.Amount = 800;  // ⚠️ may NOT trigger re-render!
    // You changed a property INSIDE the object, but didn't reassign "order" itself
  }
}

import { LightningElement, track } from 'lwc';

export default class OrderCard extends LightningElement {
  @track order = { Name: 'Order #1', Amount: 500 };

  handleUpdate() {
    this.order.Amount = 800;  // ✅ now correctly triggers re-render
  }
}

export default class OrderCard extends LightningElement {
  order = { Name: 'Order #1', Amount: 500 };  // no @track needed

  handleUpdate() {
    this.order = { ...this.order, Amount: 800 };  // ✅ reassigns top-level reference
    // Recall Module 1, Concept 5 — spread creates a NEW object reference
  }
}

export default class OrderCard extends LightningElement {
  unitPrice = 50;
  quantity = 3;

  get totalPrice() {
    return this.unitPrice * this.quantity;  // 150
  }

  get totalLabel() {
    return `Total: $${this.totalPrice}`;  // getters can use OTHER getters!
  }

  handleQuantityChange(event) {
    this.quantity = parseInt(event.target.value, 10);
    // totalPrice AND totalLabel both automatically recalculate
    // because both depend on "quantity", which just changed
  }
}

this.orders.push(newOrder);      // mutates in place — same array reference
this.orders.splice(0, 1);     // mutates in place — same array reference
this.orders.sort();             // mutates in place — same array reference
this.orders.reverse();          // mutates in place — same array reference
// All four: the variable "orders" still points to the SAME array in memory
// LWC's change detection may not reliably catch this

this.orders = [...this.orders, newOrder];          // instead of push()
this.orders = this.orders.filter((o, i) => i !== 0); // instead of splice()
this.orders = [...this.orders].sort();             // spread THEN sort the copy
this.orders = [...this.orders].reverse();          // spread THEN reverse the copy
// Each line creates a NEW array and reassigns "this.orders" to it
// → reliably detected, template re-renders correctly

export default class OrderForm extends LightningElement {
  formData = { Name: '', Email: '', Amount: 0 };

  handleNameChange(event) {
    this.formData.Name = event.target.value;  // ⚠️ unreliable — same reference
  }
}

export default class OrderForm extends LightningElement {
  formData = { Name: '', Email: '', Amount: 0 };

  handleNameChange(event) {
    this.formData = { ...this.formData, Name: event.target.value };
    // ✅ new object reference, all OTHER fields preserved unchanged
  }

  // Generic handler for ANY field, using computed property names:
  handleFieldChange(event) {
    const { name, value } = event.target;
    this.formData = { ...this.formData, [name]: value };
  }
}

this.order = {
  Id: '001',
  ...this.order,
  Account: { ...this.order.Account, Industry: 'Technology' }
};
// Updating order.Account.Industry requires spreading BOTH levels:
// the outer "order" object AND the inner "Account" object

// 1. Is the property actually being reassigned, or just mutated?
this.items.push(x);        // ❌ mutated, same reference
this.items = [...this.items, x]; // ✅ reassigned, new reference

// 2. Is the change happening on the right object?
const copy = this.formData;   // ❌ NOT a copy! Same reference as this.formData
copy.Name = 'x';             // this mutates this.formData directly too!

// 3. Is the template actually referencing the property/getter by the right name?
// (Simple typos like {orderTtal} instead of {orderTotal} fail silently — no error!)

// 4. Is the change happening asynchronously, and you're checking too early?
this.isLoading = true;
fetchData().then(data => { this.items = data; this.isLoading = false; });
console.log(this.items); // still old value here — fetchData hasn't resolved yet!