import { defineStore } from 'pinia';
import { ref } from 'vue';
import defaultSettings from '@/settings';
import changeTheme from '@/utils/changeTheme';

const { showSettings: _showSettings, tagsView: _tagsView, fixedHeader: _fixedHeader, sidebarLogo: _sidebarLogo, secondMenuPopup: _secondMenuPopup } = defaultSettings;

export const useSettingsStore = defineStore('settings', () => {
  const theme = ref('blue-theme');
  const showSettings = ref(_showSettings);
  const tagsView = ref(_tagsView);
  const fixedHeader = ref(_fixedHeader);
  const sidebarLogo = ref(_sidebarLogo);
  const secondMenuPopup = ref(_secondMenuPopup);

  function changeSetting({key, value}) {
    switch (key) {
      case 'showSettings':
        showSettings.value = value;
        break;
      case 'tagsView':
        tagsView.value = value;
        break;
      case 'fixedHeader':
        fixedHeader.value = value;
        break;
      case 'sidebarLogo':
        sidebarLogo.value = value;
        break;
      case 'secondMenuPopup':
        secondMenuPopup.value = value;
        break;
      case 'theme':
        theme.value = value;
        changeTheme(value);
        break;
    }
  }

  return { theme, showSettings, tagsView, fixedHeader, sidebarLogo, secondMenuPopup, changeSetting };
});