import { reactive, computed } from 'vue';

const state = reactive({
    disclaimerAgreement: false,
    enabledRegions: ['thorax','abdomen','limbs','head'],
    regionIconSet: Math.floor(Math.random() * 3) + 1,
    version: '0.5.0-alpha',
    build: '####',
    fullscreen: false,
    useExternal: 'optional',
    workersEnabled: 'true',
    siteDemo: false,
    externalServerList: [],
    infoUrl: false
  })

const set = (config, confObj) => {
  if (confObj === undefined) { return }
  state[config] = confObj
}

const agree = () => {
  state.disclaimerAgreement = true
}

const disableWorkers = () => {
  state.workersEnabled = false
}

const getServerList = () => {
  if (state.useExternal == 'required') {
    return state.externalServerList[0]
  } else {
    return state.externalServerList
  }
}

const toggleFullscreen = () => {
  if (document.fullscreenElement) {
    document.exitFullscreen().then( () => {
      state.fullscreen = false
    })
  } else {
    app.requestFullscreen().then( () => {
      state.fullscreen = true
    })
  }
}

export default () => ({
  isAgreed: computed(() => state.disclaimerAgreement),
  isFullscreen: computed(() => state.fullscreen),
  demoMode: computed(() => state.siteDemo),
  externalType: computed(() => state.useExternal),
  useWorkers: computed(() => state.workersEnabled),
  getRegions: computed(() => state.enabledRegions),
  getVersion: computed(() => state.version),
  getBuild: computed(() => state.build),
  getIconSet: computed(() => state.regionIconSet),
  getInfoUrl: computed(() => state.infoUrl),
  set,
  agree,
  disableWorkers,
  getServerList,
  toggleFullscreen
})