import { createApp } from "vue";
import i18n from "./i18n";
import { createVuestic } from "vuestic-ui";
import { createGtm } from "@gtm-support/vue-gtm";
import { createHead } from "unhead/client";
import { headSymbol } from "@unhead/vue";
import { setupSeo } from "./router/seo";

import stores from "./stores";
import router from "./router";
import vuesticGlobalConfig from "./services/vuestic-ui/global-config";
import App from "./App.vue";
import axios from "axios";
import { AxiosResponse } from "axios";
import { createYmaps } from "vue-yandex-maps";

const HOST = "https://cycle-rider.ru";
// const HOST = "http://localhost:8000";

axios.defaults.baseURL = HOST;

const axiosPublic = axios.create({
  baseURL: HOST,
  timeout: 60000,
});

const axiosAuth = axios.create({
  baseURL: HOST,
  timeout: 60000,
});

axiosAuth.interceptors.request.use(
  function (config) {
    const token = localStorage.getItem("token");
    config.headers.Authorization = `Bearer ${token}`;
    return config;
  },
  function (error) {
    return Promise.reject(error);
  },
);
function httpErrorHandler(error: any) {
  if (error === null) throw new Error("Unrecoverable error!! Error is null!");
  if (axios.isAxiosError(error)) {
    //here we have a type guard check, error inside this if will be treated as AxiosError
    const response = error?.response;
    const request = error?.request;
    const config = error?.config; //here we have access the config used to make the api call (we can make a retry using this conf)

    if (error.code === "ERR_NETWORK") {
      console.log("connection problems..");
    } else if (error.code === "ERR_CANCELED") {
      console.log("connection canceled..");
    }
    if (response) {
      //The request was made and the server responded with a status code that falls out of the range of 2xx the http status code mentioned above
      const statusCode = response?.status;
      if (statusCode === 404) {
        console.log(
          "The requested resource does not exist or has been deleted",
        );
      } else if (statusCode === 401) {
        localStorage.clear();
        router.push({ name: "login" });
      }
    } else if (request) {
      //The request was made but no response was received, `error.request` is an instance of XMLHttpRequest in the browser and an instance of http.ClientRequest in Node.js
    }
  }
  console.log(error.status, error.message);
  throw error;
}

function responseHandler(response: AxiosResponse<any>) {
  return response;
}

function responseErrorHandler(response: any) {
  const config = response?.config;
  if (config.raw) {
    return response;
  }
  // the code of this function was written in above section.
  return httpErrorHandler(response);
}
axiosAuth.interceptors.response.use(responseHandler, responseErrorHandler);
axiosPublic.interceptors.response.use(responseHandler, responseErrorHandler);
const app = createApp(App);

app.provide("axiosAuth", axiosAuth);
app.provide("axiosPublic", axiosPublic);
app.use(stores);
app.use(router);

const head = createHead();
app.provide(headSymbol, head);
setupSeo(router, head);

app.use(i18n);
app.use(createVuestic({ config: vuesticGlobalConfig }));
app.use(
  createYmaps({
    apikey: "6f86a7b9-e51a-4708-8ac3-ac1285807fa1",
  }),
);

app.provide("HOST", HOST);
if (import.meta.env.VITE_APP_GTM_ENABLED) {
  app.use(
    createGtm({
      id: import.meta.env.VITE_APP_GTM_KEY,
      debug: false,
      vueRouter: router,
    }),
  );
}

if (typeof window !== "undefined" && localStorage.getItem("token")) {
  axiosAuth
    .get("/api/v0/auth/check")
    .then((response: AxiosResponse) => {
      console.debug("authAuthenticated");
    })
    .catch((error: any) => {
      localStorage.clear();
    });
}

app.mount("#app");