// Regular Function — this เปลี่ยนตาม caller
const obj = {
  name: "Object",
  regularFn: function () {
    return "Regular: " + this.name;
  },
  arrowFn: () => {
    return "Arrow: " + this.name;
  },
};

console.log(obj.regularFn()); // "Regular: Object" — this = obj ✓
console.log(obj.arrowFn());   // "Arrow: undefined"   — this ≠ obj!

// arrowFn ใช้ this จาก scope นอก obj — ใน browser คือ window
// window.name = "" (empty string) หรือ undefined

// จำลอง scope 3 ระดับ — ดูว่า this ไหลผ่าน arrow อย่างไร
function outer() {
  // this = outer's caller
  const arrow = () => {
    // this = this ของ outer (lexical)
    console.log("arrow this:", this);
  };
  return arrow;
}

const obj = {
  name: "Obj",
  getArrow: outer, // outer.call(obj) → this ใน outer = obj
};

const fn = obj.getArrow(); // outer ถูกเรียก → this = obj
fn(); // arrow() ถูกเรียก → แต่ this ใน arrow = lexical = obj
// เพราะ arrow "สืบทอด" this จาก outer

// ในทางปฏิบัติ — use case ที่พบบ่อย
const team = {
  name: "DevTeam",

  // Regular method — this = team (implicit binding)
  showRegular: function () {
    // this = team
    setTimeout(function () {
      // this = window (default binding — callback!)
      console.log("Regular:", this.name); // undefined
    }, 0);
  },

  // Regular method + arrow callback — แก้ปัญหาแล้ว
  showArrow: function () {
    // this = team (implicit binding)
    setTimeout(() => {
      // this = lexical = this ของ showArrow = team ✓
      console.log("Arrow:", this.name); // "DevTeam"
    }, 0);
  },
};

team.showRegular(); // "Regular: undefined"
team.showArrow();   // "Arrow: DevTeam"

const alarm = {
  message: "ถึงเวลาพักแล้ว!",

  // ❌ แบบผิด — regular function callback
  bad: function () {
    setTimeout(function () {
      console.log(this.message); // undefined → this = window
    }, 500);
  },

  // ✅ แบบถูก — arrow function callback
  good: function () {
    setTimeout(() => {
      console.log(this.message); // "ถึงเวลาพักแล้ว!" → this = alarm
    }, 500);
  },
};

alarm.bad();  // undefined
alarm.good(); // "ถึงเวลาพักแล้ว!"

// ใช้กับ setInterval ก็ได้ — นับเวลาถอยหลัง
const timer = {
  seconds: 5,

  start: function () {
    const id = setInterval(() => {
      // this = timer (lexical จาก start)
      if (this.seconds === 0) {
        console.log("หมดเวลา!");
        clearInterval(id);
      } else {
        console.log(this.seconds);
        this.seconds--;
      }
    }, 1000);
  },
};

timer.start();
// 5
// 4
// 3
// 2
// 1
// หมดเวลา!

// ❌ Arrow Function เป็น method — this ≠ obj
const person1 = {
  name: "สมชาย",
  greet: () => {
    return "สวัสดี " + this.name;
    // this = global scope (window) — ไม่ใช่ person1!
  },
};

// ✅ Regular Function เป็น method — this = obj
const person2 = {
  name: "สมหญิง",
  greet: function () {
    return "สวัสดี " + this.name;
  },
};

console.log(person1.greet()); // "สวัสดี undefined" ✗
console.log(person2.greet()); // "สวัสดี สมหญิง"   ✓

// จำง่าย ๆ:
// method ของ object → ใช้ regular function เสมอ
// callback ใน method → ใช้ arrow function

// ✅ รูปแบบที่ถูกต้อง — method = regular, callback = arrow
const player = {
  name: "Hero",
  hp: 100,

  // method → regular function (this = player)
  takeDamage: function (amount) {
    this.hp = this.hp - amount;
    console.log(this.name + " โดนโจมตี! HP: " + this.hp);
  },

  // method → regular function (this = player)
  startPoison: function () {
    // callback → arrow function (this = lexical = player)
    this.poisonId = setInterval(() => {
      this.takeDamage(5); // this.takeDamage ใช้ได้ เพราะ this = player
      if (this.hp <= 0) {
        console.log(this.name + " หมดแรง...");
        clearInterval(this.poisonId);
      }
    }, 1000);
  },

  stopPoison: function () {
    clearInterval(this.poisonId);
    console.log("หยุดพิษแล้ว!");
  },
};

player.startPoison();
// "Hero โดนโจมตี! HP: 95"
// "Hero โดนโจมตี! HP: 90"
// ...
setTimeout(() => player.stopPoison(), 4000); // หยุดหลังจาก 4 วินาที