import { ref } from "vue";
import { autoSetModeCallback, createTemploraryID } from "./sys";
import { fetchMonitors, postUpdateMonitor, postDeleteMonitor, postInsertMonitor } from "@/api";
import {
  togetherCallback,
  deleteStoreItem,
  addStoreItem,
  updateStoreItem,
  saveStoreItems,
  recoverStoreItems,
} from "@/utils";

import type { Monitor, Monitors } from "@/api";
export type { Monitors, Monitor } from "@/api";

export const monitors = ref<Monitors>([]);

export const initMonitors = async () => {
  monitors.value = await fetchMonitors();
};

export const createMonitor = (
  am: Partial<Monitor> = {}
): Monitor => ({
  id: createTemploraryID(),
  title: `模型`,
  content: '',
  ...am,
});

let bcMonitors: Monitors = [];
export const getBackupMonitors = () => bcMonitors;
export const backupMonitors = () => {
  bcMonitors = monitors.value.map((monitor) => ({ ...monitor }));
};
export const addMonitor = addStoreItem(monitors, postInsertMonitor);
export const updateMonitors = updateStoreItem(
  monitors,
  postUpdateMonitor
);
export const deleteMonitor = deleteStoreItem(monitors, ({ id }) =>
  postDeleteMonitor(id)
);
export const initialMonitors = async () => {
  monitors.value = await fetchMonitors();
  backupMonitors();
};

export const recoverMonitors = recoverStoreItems(
  monitors,
  getBackupMonitors
);
export const saveMonitors = saveStoreItems(
  monitors,
  getBackupMonitors,
  {
    add: addMonitor,
    update: updateMonitors,
    delete: deleteMonitor,
  }
);
export const autoSaveMonitor = autoSetModeCallback([monitors], {
  backup: togetherCallback([backupMonitors]),
  recovery: togetherCallback([recoverMonitors]),
  save: async () => {
    await saveMonitors();
  },
});