import "./bootstrap";

import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import { InertiaProgress } from "@inertiajs/progress";
import { defaultConfig, plugin as FKp } from "@formkit/vue";
import { generateClasses } from "@formkit/themes";
import { autoAnimatePlugin } from "@formkit/auto-animate/vue";
import formKitTheme from "./assets/formkit.config";
import { ar, en } from "@formkit/i18n";
import axios from "axios";
import VueAxios from "vue-axios";
import VueGoogleMaps from "@fawmi/vue-google-maps";
import moment from "moment-timezone";
import { formattedDateDiff, daysToReadable } from "@/helpers/date";
import { i18n } from "@/assets/locales/l180loca";
import Popper from "vue3-popper";
import { getPreviewFromFile, getFileName } from "@/helpers/files";
import { currency, activeCurrency } from "@/helpers/money";
import moneyMixin from "@/mixins/money";
import profit from "@/mixins/profitCalculator";
import * as htmlToImage from "html-to-image";
import { url_without_protocol } from "@/assets/validation.formkit.js";
import { isImageUrl } from "@/helpers/general.js";
moneyMixin.methods.route = route;
const appName =
    window.document.getElementsByTagName("title")[0]?.innerText || "Muhandisin";
const today =
    new Date().getFullYear() +
    "-" +
    parseInt(new Date().getMonth() + 1) +
    "-" +
    new Date().getDate();

moment.tz.setDefault("Asia/Riyadh");
createInertiaApp({
    title: (title) => `${title} | ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        const VueApp = createApp({
            render: () => h(app, props),
        });

        //Global imports

        VueApp.config.globalProperties.moment = moment;

        VueApp.config.globalProperties.formattedDateDiff = formattedDateDiff;

        VueApp.config.globalProperties.daysToReadable = daysToReadable;

        VueApp.config.globalProperties.axios = axios;

        VueApp.config.globalProperties.getPreviewFromFile = getPreviewFromFile;

        VueApp.config.globalProperties.getFileName = getFileName;

        // VueApp.config.globalProperties.currency = currency;

        VueApp.config.globalProperties.domtoimage = htmlToImage;

        VueApp.config.globalProperties.today = today.toString();

        VueApp.config.globalProperties.isImageUrl = isImageUrl;

        // VueApp.config.globalProperties.activeCurrency = activeCurrency();

        VueApp.use(plugin)
            .use(
                FKp,
                defaultConfig({
                    config: {
                        classes: generateClasses(formKitTheme),
                    },
                    plugins: [
                        // createAutoAnimatePlugin({
                        //     duration: 300,
                        //     easing: "cubic-bezier(.34,2,.6,1)",
                        // }),
                    ],
                    locales: { ar, en },
                    locale: "en",
                    rules: {
                        url_without_protocol,
                    },
                })
            )
            .use(autoAnimatePlugin)
            .use(VueAxios, axios)
            .use(i18n)
            // .use(VueHtml2Canvas)
            .use(VueGoogleMaps, {
                load: {
                    key: "AIzaSyAu4aqv3DMtmugZo1wJzfcwQlM4Od6pZi0",
                    libraries: "places",
                },
            })
            .component("Popper", Popper)
            .mixin(moneyMixin)
            .mixin(profit)
            .mount(el);
    },
});

InertiaProgress.init({ color: "#4B5563" });
