import { defineStore } from 'pinia';
import defaultSettings from '@/settings';
import { useDynamicTitle } from '@/utils/dynamicTitle';
import { useStorage } from '@vueuse/core';
import { ref } from 'vue';
import { getWebsiteSetting } from '@/api/system/websiteSetting';
import { WebsiteSettingVO } from '@/api/system/websiteSetting/types';

export const useSettingsStore = defineStore('setting', () => {
  const storageSetting = useStorage<LayoutSetting>('layout-setting', {
    topNav: defaultSettings.topNav,
    tagsView: defaultSettings.tagsView,
    tagsIcon: defaultSettings.tagsIcon,
    fixedHeader: defaultSettings.fixedHeader,
    sidebarLogo: defaultSettings.sidebarLogo,
    dynamicTitle: defaultSettings.dynamicTitle,
    sideTheme: defaultSettings.sideTheme,
    theme: defaultSettings.theme
  });
  const title = ref<string>('');
  const theme = ref<string>(storageSetting.value.theme);
  const sideTheme = ref<string>(storageSetting.value.sideTheme);
  const showSettings = ref<boolean>(defaultSettings.showSettings);
  const topNav = ref<boolean>(storageSetting.value.topNav);
  const tagsView = ref<boolean>(storageSetting.value.tagsView);
  const tagsIcon = ref<boolean>(storageSetting.value.tagsIcon);
  const fixedHeader = ref<boolean>(storageSetting.value.fixedHeader);
  const sidebarLogo = ref<boolean>(storageSetting.value.sidebarLogo);
  const dynamicTitle = ref<boolean>(storageSetting.value.dynamicTitle);
  const animationEnable = ref<boolean>(defaultSettings.animationEnable);
  const dark = ref<boolean>(defaultSettings.dark);

  // 网站设置数据
  const websiteSetting = ref<WebsiteSettingVO>({
    id: 0,
    icon: 0,
    iconUrl: '',
    title: '',
    loginTitle: '',
    loginBackground: 0,
    loginBackgroundUrl: '',
    menuTitle: ''
  });
  const isFetchedWebsiteSetting = ref(false);

  const setTitle = (value: string) => {
    title.value = value;
    useDynamicTitle();
  };

  /**
   * 获取网站设置并应用
   */
  const fetchWebsiteSetting = async () => {
    if (isFetchedWebsiteSetting.value) return;
    const res = await getWebsiteSetting();
    if (res.code === 200) {
      websiteSetting.value = res.data;
      // 同步更新网页标题
      if (res.data.title) {
        setTitle(res.data.title);
      }
      // 更新 Favicon
      if (res.data.iconUrl) {
        updateFavicon(res.data.iconUrl);
      }
      isFetchedWebsiteSetting.value = true;
    }
  };

  /**
   * 更新 Favicon
   */
  const updateFavicon = (url: string) => {
    let link: HTMLLinkElement | null = document.querySelector("link[rel*='icon']");
    if (link) {
      link.href = url;
    } else {
      link = document.createElement('link');
      link.rel = 'shortcut icon';
      link.href = url;
      document.getElementsByTagName('head')[0].appendChild(link);
    }
  };

  return {
    title,
    theme,
    sideTheme,
    showSettings,
    topNav,
    tagsView,
    tagsIcon,
    fixedHeader,
    sidebarLogo,
    dynamicTitle,
    animationEnable,
    dark,
    websiteSetting,
    isFetchedWebsiteSetting,
    setTitle,
    fetchWebsiteSetting
  };
});
