import { defineStore } from 'pinia'
import { getAuth, getInfo } from '@/api/module/editor'
// import { watch } from 'vue'

// useStore could be anything like useUser, useCart
// the first argument is a unique id of the store across your application
export const useMainStore = defineStore('main', {
  state: () => {
    return {
      sceneCode: '',
      counter: 0,
      showDrawer: false,
      sceneRef: null,
      sceneRefWidth: 0,
      digitalHumanList: [],
      sceneLink: '',
      sceneMode: 'pc',
      sceneConfig: {
        message: 'verify'
      },
      basicConfig: {
        mode: 'pc', //true pc false mobile
        themes: '',
        autoRotate: false, //true 自动播放
        joystick: {
          show: false,
          position: 'left'
        },
        age: 18
      },
      sceneInfo: {
        boxVideos: '',
        boxModels: ''
      },
      aiSetting: [],
      navigation: []
    }
  },
  getters: {
    sceneURL: ({ sceneLink, sceneConfig, sceneMode }) => {
      if (sceneLink) {
        console.log(
          sceneLink +
            `&mobile=${sceneMode == 'mobile' ? 'true' : 'false'}&config=` +
            JSON.stringify(sceneConfig || {})
        )
        return (
          sceneLink +
          `&mobile=${sceneMode == 'mobile' ? 'true' : 'false'}&config=` +
          JSON.stringify(sceneConfig || {})
        )
      }
    },
    count: ({ counter }) => counter,
    getBasicConfig: ({ basicConfig }) => basicConfig,
    getDigitalHumanList: ({ digitalHumanList }) => digitalHumanList,
    getEditorData: ({ basicConfig, aiSetting, navigation, sceneCode }) => {
      return {
        baseSetting: basicConfig,
        navigation: navigation,
        aiSetting: aiSetting,
        num: sceneCode
      }
    }
  },
  actions: {
    incrementCounter(count: number) {
      this.counter += count
    },
    setSceneRef(sceneRef: any) {
      this.sceneRef = sceneRef
    },
    setWidthSceneRef(width: number) {
      if (this.sceneRef) {
        const sceneRef = this.sceneRef as never as HTMLElement
        sceneRef.style.width = `calc(100% - ${width || 0}px)`
      }
    },
    setSceneLink(link: string) {
      this.sceneLink = link
    },
    setSceneMode(mode: string) {
      this.sceneMode = mode
    },
    setSceneConfig(config: object) {
      this.sceneConfig = { ...this.sceneConfig, ...config }
    },
    setSceneCode(m: string) {
      this.sceneCode = m
    },
    async getSceneInfo() {

      const auth = await getAuth(this.sceneCode)
      if (auth === false) {
        return false
      }
      const data = await getInfo(this.sceneCode)
      console.log('data', data)

      this.sceneInfo = data as any as {
        boxVideos: string
        boxModels: string
        scrbInfo: {
          aiSetting: any[]
          navigation: any[]
          baseSetting: any[]
        }
      }
      if (this.sceneInfo) {
        //@ts-ignore
        if (this.sceneInfo.scrbInfo.aiSetting) {
          //@ts-ignore
          this.aiSetting = this.sceneInfo.scrbInfo.aiSetting
        }
        //@ts-ignore
        if (this.sceneInfo.scrbInfo.navigation) {
          //@ts-ignore
          this.navigation = this.sceneInfo.scrbInfo.navigation
        }
        //@ts-ignore
        if (this.sceneInfo.scrbInfo.baseSetting) {
          //@ts-ignore
          this.basicConfig = this.sceneInfo.scrbInfo.baseSetting
        }
      }
      return data
    },
    syncNavigation(navigation: any[]) {
      this.navigation = navigation as any as []
    },
    syncAISetting(aiSetting: any[]) {
      this.aiSetting = aiSetting as any as []
    }
  }
})
