import { defineStore } from 'pinia'
import { 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: {},
      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 data = await getInfo(this.sceneCode)
      console.log('data', data)
      this.sceneInfo = data as any as {}
    }
  }
})