import type { GlobalThemeOverrides } from 'naive-ui';
import { defineStore } from 'pinia';
import { computed, shallowRef } from 'vue';
import { colord } from 'colord';

const LOCAL_FIXED_THEME_PRIMARY_COLOR = '#31A848FF';

export const useLocalConfigStore = defineStore(
  'localConfig',
  () => {
    // 本地主题色配置
    const { primaryColor, resetPrimaryColor, grayMode, toggleGrayMode, naiveThemeProps } = (function () {
      const primaryColor = shallowRef<string>(LOCAL_FIXED_THEME_PRIMARY_COLOR);

      // naive-ui 主题色变更
      const naiveThemeProps = computed((): GlobalThemeOverrides => {
        const hsColor = colord(primaryColor.value).lighten(0.035);
        const pColor = colord(primaryColor.value).darken(0.1);
        return {
          common: {
            primaryColor: primaryColor.value,
            primaryColorHover: hsColor.toHex(),
            primaryColorPressed: pColor.toHex(),
            primaryColorSuppl: hsColor.toHex(),
          },
          LoadingBar: {
            colorLoading: primaryColor.value,
          },
        };
      });

      function resetPrimaryColor() {
        primaryColor.value = LOCAL_FIXED_THEME_PRIMARY_COLOR;
      }

      const grayMode = shallowRef<boolean>(false);
      function toggleGrayMode() {
        grayMode.value = !grayMode.value;
        if (grayMode.value) {
          document.documentElement.style.filter = 'grayscale(1)';
        } else {
          document.documentElement.style.filter = 'grayscale(0)';
        }
      }

      return {
        primaryColor,
        resetPrimaryColor,
        grayMode,
        toggleGrayMode,
        naiveThemeProps,
      };
    })();

    // 布局配置

    return {
      primaryColor,
      resetPrimaryColor,
      grayMode,
      toggleGrayMode,
      naiveThemeProps,
    };
  },
  {
    persist: true,
  }
);