import { Dark } from 'quasar';
import { setLocale as setDateTimeLocale } from './datetime';
import { i18n } from 'src/boot/i18n';

export enum Theme {
  Light = 'light',
  Dark = 'dark',
  Auto = 'auto',
}

/**
 * This is used to detect current theme that set before entering app.
 *
 * **Warning:** This must be used after initialize vue and quasar as it use quasar api.
 */
export function initTheme(): Theme {
  const current = localStorage.getItem('currentTheme') as Theme | null;
  if (!current) return setTheme(Theme.Auto);
  return setTheme(current);
}

/**
 * This is used to set quasar theme through quasar api.
 *
 * **Warning:** Must be called after initialize vue and quasar.
 */
export function setTheme(theme: Theme): Theme {
  localStorage.setItem('currentTheme', theme);

  if (theme !== Theme.Auto) {
    Dark.set(theme === Theme.Dark);
  }

  if (theme === Theme.Auto) {
    Dark.set(window.matchMedia('(prefers-color-scheme: dark)').matches);
  }

  return theme;
}

export enum Lang {
  English = 'eng',
  Thai = 'tha',
}

/**
 * This is used to get remembered language and use it.
 *
 * **Warning:** Must be used after initialize vue and vue-i18n
 */
export function initLang(): Lang {
  const { locale } = i18n.global;
  const current = localStorage.getItem('currentLanguage') as Lang | null;

  if (current !== Lang.English && current !== Lang.Thai) {
    return setLang(Lang.Thai);
  }

  if (!current) return setLang(locale.value as Lang);

  return setLang(current);
}

/**
 * This is used to set language and also remember the language set.
 *
 * **Warning:** Must be used after initialize vue and vue-i18n
 */
export function setLang(lang: Lang): Lang {
  const { locale } = i18n.global;
  locale.value = lang;
  localStorage.setItem('currentLanguage', lang);

  // TODO: Make date time get locale from i18n instead of telling it to use specific lang.
  setDateTimeLocale(lang === Lang.English ? 'en' : 'th');

  return lang;
}