import { useQuasar } from 'quasar'

/**
 * @composable useThemeMode
 * @description จัดการระบบโหมดสว่าง/มืด (Light/Dark Theme) ของแพลตฟอร์ม
 * ครอบคลุมการสั่งบันทึกการตั้งค่า, เปลี่ยนคลาส Tailwind และ Sync ซิงก์กับ Quasar UI
 */
export const useThemeMode = () => {
  const $q = useQuasar()

  // สถานะเริ่มต้นของโหมดมืด (สำหรับการทำ SSR ถูกเซ็ตเป็น false (สว่าง) ไว้ก่อน)
  const isDark = useState<boolean>('theme:isDark', () => false)

  // ฟังก์ชันใช้คลาสกับ Tag <html> เพื่อให้ Tailwind หรือ CSS รันโหมดมืด
  const applyTheme = (value: boolean) => {
    if (!process.client) return // หากทำงานฝั่งเซิร์ฟเวอร์ จะไม่สั่งให้รัน DOM
    
    // สลับคลาส 'dark' หรือปิด
    document.documentElement.classList.toggle('dark', value)
    
    // สั่งให้ Quasar (UI Framework) ปรับโหมดสีให้ตรงกัน (มืด/สว่าง)
    $q.dark.set(value)
    
    // บันทึกการตั้งค่าลงเครื่องระยะยาวเบราว์เซอร์
    localStorage.setItem('theme', value ? 'dark' : 'light')
  }


  // จับตาดูเมื่อตัวแปรเปลี่ยนค่าค่อยทำการเปลี่ยนโหมดบนหน้าจอ
  watch(isDark, (v) => applyTheme(v))

  // ฟังก์ชันสั่งสลับโหมด ไปมา (Toggle)
  const toggle = () => {
    isDark.value = !isDark.value
  }

  // ฟังก์ชันสำหรับกำหนดตั้งค่าโหมดแบบเจาะจง
  const set = (v: boolean) => {
    isDark.value = v
  }

  return { isDark, toggle, set }
}