import { defineStore } from 'pinia'
import { store } from '@/store/index'
import { defaultFont, list } from '@/api/font'
import { uiLoadApi } from '@/api/login'
import { useCache } from '@/hooks/web/useCache'
import colorFunctions from 'less/lib/less/functions/color.js'
import colorTree from 'less/lib/less/tree/color.js'
import { useEmbedded } from '@/store/modules/embedded'
import { setTitle } from '@/utils/utils'

const embeddedStore = useEmbedded()
const basePath = import.meta.env.VITE_API_BASEPATH
const baseUrl = basePath + '/appearance/image/'
import { isBtnShow } from '@/utils/utils'
interface AppearanceState {
  themeColor?: string
  customColor?: string
  navigateBg?: string
  navigate?: string
  mobileLogin?: string
  mobileLoginBg?: string
  help?: string
  showAi?: string
  showCopilot?: string
  showDoc?: string
  showAbout?: string
  bg?: string
  login?: string
  showSlogan?: string
  slogan?: string
  web?: string
  name?: string
  foot?: string
  footContent?: string
  loaded: boolean
  showDemoTips?: boolean
  demoTipsContent?: string
  community: boolean
  fontList: Array<{ name: string; id: string; isDefault: boolean }>
}
const { wsCache } = useCache()
export const useAppearanceStore = defineStore('appearanceStore', {
  state: (): AppearanceState => {
    return {
      themeColor: '',
      customColor: '',
      navigateBg: '',
      navigate: '',
      mobileLogin: '',
      mobileLoginBg: '',
      help: '',
      showDoc: '0',
      showAi: '0',
      showCopilot: '0',
      showAbout: '0',
      bg: '',
      login: '',
      showSlogan: 'true',
      slogan: '',
      web: '',
      name: '',
      foot: 'false',
      footContent: '',
      loaded: false,
      showDemoTips: false,
      demoTipsContent: '',
      community: true,
      fontList: []
    }
  },
  getters: {
    getNavigate(): string {
      if (this.navigate) {
        return baseUrl + this.navigate
      }
      return null
    },
    getMobileLogin(): string {
      if (this.mobileLogin) {
        return baseUrl + this.mobileLogin
      }
      return null
    },
    getMobileLoginBg(): string {
      if (this.mobileLoginBg) {
        return baseUrl + this.mobileLoginBg
      }
      return null
    },
    getHelp(): string {
      return this.help
    },
    getThemeColor(): string {
      return this.themeColor
    },
    getCustomColor(): string {
      return this.customColor
    },
    getNavigateBg(): string {
      return this.navigateBg
    },
    getBg(): string {
      if (this.bg) {
        return baseUrl + this.bg
      }
      return null
    },
    getLogin(): string {
      if (this.login) {
        return baseUrl + this.login
      }
      return null
    },
    getShowSlogan(): string {
      return this.showSlogan
    },
    getSlogan(): string {
      return this.slogan
    },
    getWeb(): string {
      if (this.web) {
        return baseUrl + this.web
      }
      return null
    },
    getName(): string {
      return this.name
    },
    getLoaded(): boolean {
      return this.loaded
    },
    getFoot(): string {
      return this.foot
    },
    getFootContent(): string {
      return this.footContent
    },
    getShowDemoTips(): boolean {
      return this.showDemoTips
    },
    getDemoTipsContent(): string {
      return this.demoTipsContent
    },
    getCommunity(): boolean {
      return this.community
    },
    getShowAi(): boolean {
      return isBtnShow(this.showAi)
    },
    getShowDoc(): boolean {
      return isBtnShow(this.showDoc)
    },
    getShowAbout(): boolean {
      return isBtnShow(this.showAbout)
    }
  },
  actions: {
    setNavigate(data: string) {
      this.navigate = data
    },
    setMobileLogin(data: string) {
      this.mobileLogin = data
    },
    async setFontList() {
      const res = await list()
      this.fontList = res || []
    },
    setCurrentFont(name) {
      const currentFont = this.fontList.find(ele => ele.name === name)
      if (currentFont) {
        let fontStyleElement = document.querySelector(`[id="de-custom_font${name}"]`)
        if (!fontStyleElement) {
          fontStyleElement = document.createElement('style')
          fontStyleElement.setAttribute('id', `de-custom_font${name}`)
          document.querySelector('head').appendChild(fontStyleElement)
        }
        fontStyleElement.innerHTML = `@font-face {
            font-family: '${name}';
            src: url(${
              embeddedStore.baseUrl
                ? (embeddedStore.baseUrl + basePath).replace('/./', '/')
                : basePath
            }/typeface/download/${currentFont.fileTransName});
            font-weight: normal;
            font-style: normal;
            }`
      }
    },
    setMobileLoginBg(data: string) {
      this.mobileLoginBg = data
    },
    setHelp(data: string) {
      this.help = data
    },
    setNavigateBg(data: string) {
      this.navigateBg = data
    },
    setThemeColor(data: string) {
      this.themeColor = data
    },
    setCustomColor(data: string) {
      this.customColor = data
    },
    setLoaded(data: boolean) {
      this.loaded = data
    },
    async setAppearance(isDataEaseBi?: boolean) {
      const desktop = wsCache.get('app.desktop')
      if (desktop) {
        this.loaded = true
        this.community = true
      }
      if (this.loaded) {
        return
      }
      defaultFont().then(res => {
        const [font] = res || []
        setDefaultFont(
          `${
            embeddedStore.baseUrl
              ? (embeddedStore.baseUrl + basePath).replace('/./', '/')
              : basePath
          }/typeface/download/${font?.fileTransName}`,
          font?.name,
          font?.fileTransName
        )
        function setDefaultFont(url, name, fileTransName) {
          let fontStyleElement = document.querySelector('#de-custom_font')
          if (!fontStyleElement) {
            fontStyleElement = document.createElement('style')
            fontStyleElement.setAttribute('id', 'de-custom_font')
            document.querySelector('head').appendChild(fontStyleElement)
          }
          fontStyleElement.innerHTML =
            name && fileTransName
              ? `@font-face {
                font-family: '${name}';
                src: url(${url});
                font-weight: normal;
                font-style: normal;
                }`
              : ''
          document.documentElement.style.setProperty('--de-custom_font', `${name}`)
          document.documentElement.style.setProperty('--van-base-font', `${name}`)
        }
      })
      if (!isDataEaseBi) {
        document.title = ''
      }
      const res = await uiLoadApi()
      this.loaded = true
      const resData = res.data
      if (!resData?.length) {
        if (!isDataEaseBi) {
          document.title = 'DataEase'
          setLinkIcon()
        }
        return
      }
      const data: AppearanceState = { loaded: false, community: true }
      let isCommunity = false
      resData.forEach(item => {
        data[item.pkey] = item.pval
        if (item.pkey === 'community') {
          isCommunity = true
        }
      })
      data.community = isCommunity
      this.community = data.community
      if (this.community) {
        this.showDemoTips = data.showDemoTips
        this.demoTipsContent = data.demoTipsContent
        this.loaded = true
        setLinkIcon()
        return
      }
      this.navigate = data.navigate
      this.mobileLogin = data.mobileLogin
      this.mobileLoginBg = data.mobileLoginBg
      this.help = data.help
      this.showAi = data.showAi
      this.showCopilot = data.showCopilot
      this.showDoc = data.showDoc
      this.showAbout = data.showAbout
      this.navigateBg = data.navigateBg
      this.themeColor = data.themeColor
      this.customColor = data.customColor
      if (this.themeColor === 'custom' && this.customColor) {
        document.documentElement.style.setProperty('--ed-color-primary', this.customColor)
        document.documentElement.style.setProperty('--van-blue', this.customColor)
        document.documentElement.style.setProperty(
          '--ed-color-primary-light-5',
          colorFunctions
            .mix(new colorTree('ffffff'), new colorTree(this.customColor.substr(1)), { value: 40 })
            .toRGB()
        )
        document.documentElement.style.setProperty(
          '--ed-color-primary-light-3',
          colorFunctions
            .mix(new colorTree('ffffff'), new colorTree(this.customColor.substr(1)), { value: 15 })
            .toRGB()
        )
        document.documentElement.style.setProperty(
          '--ed-color-primary-dark-20',
          colorFunctions
            .mix(new colorTree('000000'), new colorTree(this.customColor.substr(1)), { value: 20 })
            .toRGB()
        )
        document.documentElement.style.setProperty('--ed-color-primary-1a', `${this.customColor}1a`)
        document.documentElement.style.setProperty('--ed-color-primary-33', `${this.customColor}33`)
        document.documentElement.style.setProperty('--ed-color-primary-99', `${this.customColor}99`)
        document.documentElement.style.setProperty(
          '--ed-color-primary-dark-2',
          colorFunctions
            .mix(new colorTree('000000'), new colorTree(this.customColor.substr(1)), { value: 15 })
            .toRGB()
        )
      } else if (document.documentElement.style.getPropertyValue('--ed-color-primary')) {
        document.documentElement.style.setProperty('--ed-color-primary', '#3370FF')
        document.documentElement.style.removeProperty('--ed-color-primary-light-3')
        document.documentElement.style.removeProperty('--ed-color-primary-light-5')
        document.documentElement.style.removeProperty('--ed-color-primary-1a')
        document.documentElement.style.removeProperty('--ed-color-primary-33')
        document.documentElement.style.removeProperty('--ed-color-primary-99')
        document.documentElement.style.removeProperty('--ed-color-primary-dark-2')
        document.documentElement.style.removeProperty('--ed-color-primary-dark-20')
      }
      this.bg = data.bg
      this.login = data.login
      this.showSlogan = data.showSlogan
      this.slogan = data.slogan
      this.web = data.web
      this.name = data.name
      this.foot = data.foot
      this.footContent = data.footContent
      if (isDataEaseBi) return
      if (this.name) {
        document.title = this.name
        setTitle(this.name)
      } else {
        document.title = 'DataEase'
        setTitle('DataEase')
      }
      setLinkIcon(this.web)
    }
  }
})

const setLinkIcon = (linkWeb?: string) => {
  const link = document.querySelector('link[rel="icon"]')
  if (link) {
    if (linkWeb) {
      link['href'] = baseUrl + linkWeb
    } else {
      link['href'] = '/dataease.svg'
    }
  }
}

export const useAppearanceStoreWithOut = () => {
  return useAppearanceStore(store)
}