import { ref } from 'vue'
import { createTemploraryID } from './sys'
import { autoSetModeCallback } from './sys'
import { 
  fetchGuides, 
  postAddGuide, 
  postDeleteGuide,
  postUpdateGuide,
  uploadFile,
} from '@/api'
import { 
  deleteStoreItem, 
  addStoreItem, 
  updateStoreItem, 
  fetchStoreItems,
  saveStoreItems,
  recoverStoreItems
} from '@/utils'

import type { Guide as SGuide } from '@/api'

export type Guide = LocalMode<SGuide, 'cover'>
export type Guides = Guide[]

export const guides = ref<Guides>([])

export const createGuide = (guide: Partial<Guide> = {}): Guide => ({
  id: createTemploraryID(),
  title: `路径${guides.value.length + 1}`,
  cover: '',
  ...guide
})

let bcGuides: Guides = []
export const getBackupGuides = () => bcGuides
export const backupGuides = () => {
  bcGuides = guides.value.map(guide => ({...guide }))
}

export const transformGuide = async (guide: Guide): Promise<SGuide> => {
  const guideCover = await uploadFile(guide.cover)
  return { ...guide, cover: guideCover }
}

export const recoverGuides = recoverStoreItems(guides, getBackupGuides)
export const addGuide = addStoreItem(guides, postAddGuide, transformGuide)
export const updateGuide = updateStoreItem(guides, postUpdateGuide, transformGuide)
export const deleteGuide = deleteStoreItem(guides, guide => postDeleteGuide(guide.id))
export const initialGuides = fetchStoreItems(guides, fetchGuides, backupGuides)
export const saveGuides = saveStoreItems(
  guides,
  getBackupGuides,
  {
    add: addGuide,
    update: updateGuide,
    delete: deleteGuide,
  }
)
export const autoSaveGuides = autoSetModeCallback(guides, {
  backup: backupGuides,
  recovery: recoverGuides,
  save: saveGuides,
})