import { defineStore } from 'pinia';
import { computed, onMounted, ref } from 'vue';

const DONT_SHOW_AGAIN_KEY = 'dontShowAgain';

export const useIntroStore = defineStore('intro', () => {
  // Backing ref is required for reactivity to work with localStorage
  const _dontShowAgain = ref<boolean>(false);

  const dontShowAgain = computed({
    get(): boolean {
      return _dontShowAgain.value;
    },
    set(value: boolean): void {
      _dontShowAgain.value = value;
      localStorage.setItem(DONT_SHOW_AGAIN_KEY, JSON.stringify(value));
    },
  });

  onMounted(() => {
    const value = localStorage.getItem(DONT_SHOW_AGAIN_KEY);
    if (value !== null && value !== undefined) {
      try {
        _dontShowAgain.value = JSON.parse(value) as boolean;
      } catch (error) {
        console.error('Error parsing stored value:', error);
        _dontShowAgain.value = false;
      }
    } else {
      _dontShowAgain.value = false;
    }
  });

  return { dontShowAgain };
});