import { ref } from "vue";
import { autoSetModeCallback, createTemploraryID, unSetModelUpdate } from './sys'
import { fuseModels } from './fuse-model'
import { 
  addStoreItem, 
  deleteStoreItem, 
  fetchStoreItems, 
  recoverStoreItems, 
  saveStoreItems, 
  updateStoreItem
} from '@/utils'
import {
  fetchViews,
  postAddView,
  postUpdateView,
  postDeleteView,
  uploadFile
} from '@/api'
import { fuseModel } from '@/model'

import type { View as SView } from '@/api'
import type { ModelType } from '@/model'

export type View = LocalMode<SView, 'cover'>
export type Views = View[]

export const views = ref<Views>([])

export const createView = (view: Partial<View> = {}): View => {
  const base = {
    id: createTemploraryID(),
    title: '视图',
    cover: 'https://4dkk.4dage.com/scene_view_data/KK-t-F8e5M46wcQ/images/floor_0.png?t=1659422513133?v=0&rnd=0.9219648338739086&x-oss-process=image/resize,m_fill,w_80,h_60/quality,q_70&rnd=0.25420557086595965',
    flyData: '',
    num: null,
    numType: null,
    fusionId: fuseModels.value[0].fusionId,
    sort: Math.min(...views.value.map(item => item.sort)) - 1,
    ...view,
  }
  if (typeof view.fusionId === 'number') {
    return {
      ...base,
      ...view,
      fusionId: view.fusionId,
      num: null,
      numType: null
    }
  } else if (view.num && typeof view.numType === 'number') {
    return {
      ...base,
      num: view.num,
      numType: view.numType,
      fusionId: null,
    }
  } else {
    return base as View
  }
}

export const viewToModelType = (view: View): ModelType => {
  if (typeof view.fusionId === 'number') {
    return fuseModel
  } else {
    return { num: view.num!, type: view.numType! }
  }
}


let bcViews: Views = []
export const getBackupViews = () => bcViews
export const backupViews = () => {
  bcViews = views.value.map(view => ({...view}))
}
export const recoverViews = recoverStoreItems(views, getBackupViews)


export const initialViews = async () => {
  const serviceViews = await fetchViews()
  unSetModelUpdate(() => views.value = serviceViews)
  backupViews()
}
export const addView = addStoreItem(views, async (view) => {
  const cover = await uploadFile(view.cover)
  return await postAddView({ ...view, cover })
})
export const updateView = updateStoreItem(views, async (view) => {
  const cover = await uploadFile(view.cover)
  return await postUpdateView({ ...view, cover })
})
export const deleteView = deleteStoreItem(views, view => postDeleteView(view.id))
export const saveViews = saveStoreItems(
  views, 
  getBackupViews,
  {
    add: addView,
    delete: deleteView,
    update: updateView
  }
)
export const autoSaveViews = autoSetModeCallback(views, {
  backup: backupViews,
  recovery: recoverViews,
  save: async () => {
    for (let i = 0; i < views.value.length; i++) {
      views.value[i].sort = i
    }
    await saveViews()
  }
})