import { ref } from "vue";
import { title } from "./store/system";
import { appConstant } from "./app";
import {
  caseFileTypes,
  caseFiles,
  insertCaseFile,
  deleteCaseFile,
  updateCaseFile,
  axios,
  caseFileInfo,
  saveCaseFileInfo,
  getSysSetting,
  updateSysSetting,
} from "@/request";

const modules = import.meta.glob("@/assets/style/theme/*.scss", {
  query: "?inline",
});

axios.get(getSysSetting).then((data) => {
  systemData.value.name = data.data.title;
  systemData.value.color = data.data.themeColour;
  refresh();
});

const update = () => {
  axios.post(updateSysSetting, {
    title: systemData.value.name,
    themeColour: systemData.value.color,
  });
};

export const themeColors = [
  "d8000a",
  "0960bd",
  "0084f4",
  "009688",
  "536dfe",
  "ff5c93",
  "ee4f12",
  "0096c7",
  "9c27b0",
  "ff9800",
];

export const systemData = ref({
  name: appConstant.name,
  color: themeColors[0],
});

const $style = document.createElement("style");
$style.setAttribute("type", "text/css");
document.body.appendChild($style);

const refresh = async () => {
  title.value = systemData.value.name;

  const key = Object.keys(modules).find((key) =>
    key.includes(systemData.value.color)
  );
  if (key) {
    const res1: any = await modules[key]();
    const res2: any = await import("@/assets/style/public.scss?inline");
    $style.innerHTML = res1.default + res2.default;
  }
};

export const setTheme = async (color: string) => {
  systemData.value.color = color;
  await update();
  refresh();
};

export const setTitle = async (d: string) => {
  systemData.value.name = d;
  await update();
  refresh();
};