import { ref, computed } from 'vue'
import { autoSetModeCallback, createTemploraryID } from './sys'
import { 
  defStyleType,
  fetchTaggingStyles,
  postAddTaggingStyle,
  postDeleteTaggingStyle
} from '@/api'
import { 
  addStoreItem, 
  deleteStoreItem, 
  fetchStoreItems, 
  recoverStoreItems, 
  saveStoreItems 
} from '@/utils'

import type { TaggingStyle as STaggingStyle } from '@/api'

export type TaggingStyle = LocalMode<STaggingStyle, 'icon'>
export type TaggingStyles = TaggingStyle[]


export const taggingStyles = ref<TaggingStyles>([])
export const defaultStyle = computed(() => taggingStyles.value.find(style => style.default))
export const lastUseStyle = computed(() => taggingStyles.value.find(style => style.lastUse))

export const createTaggingStyle = (style: Partial<TaggingStyle> = {}): TaggingStyle => ({
  id: createTemploraryID(),
  icon: '',
  lastUse: 0,
  default: false,
  typeId: defStyleType.id,
  ...style
})

export const getTaggingStyle = (id: TaggingStyle['id']) => {
  return taggingStyles.value.find(style => style.id === id)
}


let bcStyles: TaggingStyles = []
export const getBackupTaggingStyles = () => bcStyles
export const backupTaggingStyles = () => {
  bcStyles = taggingStyles.value.map(style => ({...style}))
}
export const recoverTaggingStyles = recoverStoreItems(taggingStyles, getBackupTaggingStyles)


export const initialTaggingStyles = fetchStoreItems(taggingStyles, fetchTaggingStyles, backupTaggingStyles)
export const addTaggingStyle = addStoreItem(taggingStyles, async (tagging) => {
  if (typeof tagging.icon === 'string') {
    return tagging
  } else {
    return postAddTaggingStyle({ file: tagging.icon.blob, iconTitle: tagging.typeId.toString() })
  }
})
export const deleteTaggingStyle = deleteStoreItem(taggingStyles, style => postDeleteTaggingStyle(style.id))
export const saveTaggingStyles = saveStoreItems(
  taggingStyles, 
  getBackupTaggingStyles,
  {
    add: addTaggingStyle,
    delete: deleteTaggingStyle,
  }
)
export const autoSaveTaggingStyles = autoSetModeCallback(taggingStyles, {
  backup: backupTaggingStyles,
  recovery: recoverTaggingStyles,
  save: saveTaggingStyles,
})