import { defineStore } from 'pinia';
import { ref, watch } from 'vue';
import { useTheme } from 'vuetify';
import { Theme } from '@3cr/viewer-types-ts';
import { useMediaQuery } from '@vueuse/core';

const THEME_KEY = 'theme';

export const useThemeStore = defineStore('theme', () => {
  const themeInstance = useTheme();
  const prefersLight = useMediaQuery('(prefers-color-scheme: light)');
  const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');

  const theme = ref<Theme>(getLocalStorageTheme() ?? 'default');

  /* istanbul ignore next -- @preserve */
  watch(
    [theme, prefersLight, prefersDark],
    ([value]) => {
      theme.value = value;
      themeInstance.global.name.value =
        value !== 'default' ? value : getPreference();
      localStorage.setItem(THEME_KEY, value);
    },
    { immediate: true },
  );

  /* istanbul ignore next -- @preserve */
  function getLocalStorageTheme(): Theme | null {
    const value = localStorage.getItem(THEME_KEY);
    return value ? (value as Theme) : null;
  }

  /* v8 ignore start -- @preserve */
  function getPreference(): Theme {
    if (prefersLight.value) {
      return 'light';
    } else if (prefersDark.value) {
      return 'dark';
    } else {
      // if no preference, default to light
      return 'light';
    }
  }
  /* v8 ignore stop -- @preserve */

  return { theme, prefersLight, prefersDark };
});