import eruda from "eruda";
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router";
import { IonicVue } from "@ionic/vue";
import { GesturePlugin } from "@vueuse/gesture";
import { Capacitor } from "@capacitor/core";
import { StatusBar, Style } from "@capacitor/status-bar";
import { SafeArea } from "capacitor-plugin-safe-area";

import "./theme/tailwind.css";

/* Core CSS required for Ionic components to work properly */
import "@ionic/vue/css/core.css";

/* Basic CSS for apps built with Ionic */
import "@ionic/vue/css/normalize.css";
import "@ionic/vue/css/structure.css";
import "@ionic/vue/css/typography.css";

/* Optional CSS utils that can be commented out */
import "@ionic/vue/css/padding.css";
import "@ionic/vue/css/float-elements.css";
import "@ionic/vue/css/text-alignment.css";
import "@ionic/vue/css/text-transformation.css";
import "@ionic/vue/css/flex-utils.css";
import "@ionic/vue/css/display.css";

import "swiper/css";

/* Theme variables */
import "./theme/variables.css";

import "./theme/main.less";

if (process.env.NODE_ENV === "development") {
    eruda.init();
}

if (Capacitor.isNativePlatform()) {
    StatusBar.setOverlaysWebView({ overlay: true });
    if (Capacitor.getPlatform() === "android") {
        SafeArea.getSafeAreaInsets().then(({ insets }) => {
            const style = document.documentElement.style;
            style.setProperty("--ion-safe-area-top", insets.top + "px");
            // style.setProperty('--ion-safe-area-bottom', insets.bottom + 'px')
        });
    }
}

const app = createApp(App)
    .use(createPinia())
    .use(IonicVue, {
        mode: "ios",
        swipeBackEnabled: false,
    })
    .use(GesturePlugin)
    .use(router);

router.isReady().then(() => {
    app.mount("#app");
});
