import { createApp, h } from "vue";
import {
  Badge,
  Button,
  Dialog,
  ErrorMessage,
  FormControl,
  frappeRequest,
  FrappeUI,
  setConfig,
  TextInput,
  toast,
  Tooltip,
} from "frappe-ui";
import { createPinia } from "pinia";
import App from "./App.vue";
import { spritePlugin } from "frappe-ui/experimental";
import { createDialog } from "./components/dialogs";
import "./index.css";
import { router } from "./router";
import { telemetryPlugin } from "@framework/ui";
import { translationPlugin } from "./translation";
import CircleAlert from "~icons/lucide/circle-alert";
import { initSocket } from "./socket";

const globalComponents = {
  Badge,
  Button,
  Dialog,
  ErrorMessage,
  FormControl,
  Tooltip,
  TextInput,
};

// Attached to the fetcher, not set as the global `serverMessagesHandler`: the
// global one also governs `call()`, which beta.63 started routing a response's
// `_server_messages` through. Resources keep toasting, `call()` stays silent.
setConfig("resourceFetcher", (options) =>
  frappeRequest({ ...options, onServerMessages: showServerMessages })
);

function showServerMessages(msgs) {
  msgs.forEach((msg) => {
    msg = JSON.parse(msg);
    // `alert` is frappe's own flag for throwaway desk chatter ("Document
    // renamed from X to Y"), which our own toasts already cover. No opendesk
    // msgprint sets it.
    if (!msg || msg.alert) return;
    if (msg.message == "Feedback email has been sent to the customer.") {
      toast.success(msg.message);
      return;
    }
    toast(msg.message, {
      icon: () => h(CircleAlert, { class: "text-ink-blue-5" }),
    });
  });
}
setConfig("fallbackErrorHandler", (error) => {
  const msg = error.exc_type
    ? (error.messages || error.message || []).join(", ")
    : error.message;
  toast.error(msg);
});

const pinia = createPinia();
const app = createApp(App);

app.use(FrappeUI);
app.use(spritePlugin);
app.use(pinia);
app.use(router);
app.use(translationPlugin);
app.use(telemetryPlugin, { app_name: "opendesk" });

for (const c in globalComponents) {
  app.component(c, globalComponents[c]);
}

app.config.globalProperties.$dialog = createDialog;

let socket;
if (import.meta.env.DEV) {
  frappeRequest({
    url: "/api/method/opendesk.www.opendesk.index.get_context_for_dev",
  }).then((values) => {
    for (let key in values) {
      window[key] = values[key];
    }
    if (window.dir) document.documentElement.dir = window.dir;
    if (window.lang) document.documentElement.lang = window.lang;
    socket = initSocket();
    app.config.globalProperties.$socket = socket;
    app.mount("#app");
  });
} else {
  socket = initSocket();
  app.config.globalProperties.$socket = socket;
  app.mount("#app");
}