import './bootstrap.js';
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import PrimeVue from 'primevue/config';
import AuraCustomPreset from './Admin/theme/noir.js';
import { createPinia } from 'pinia'
import Vue3PersianDatetimePicker from 'vue3-persian-datetime-picker'
import ToastService from 'primevue/toastservice';
import ConfirmationService from 'primevue/confirmationservice';
import { ZiggyVue } from 'ziggy-js';
import { Ziggy } from './ziggy.js';
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';




const pinia = createPinia();

import { InertiaProgress } from '@inertiajs/progress'
InertiaProgress.init({
    delay: 600,
    color: '#550408',
    includeCSS: true,
    showSpinner: true,
})


createInertiaApp({
    resolve: name => resolvePageComponent(`./Admin/Pages/${name}.vue`, import.meta.glob('./Admin/Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        const app = createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(pinia)
            .use(ZiggyVue, Ziggy)
            .use(ToastService, { icon: false })
            .use(ConfirmationService)
            .use(Vue3PersianDatetimePicker, {
                name: 'CustomDatePicker',
                props: {
                    format: 'YYYY-MM-DD HH:mm',
                    displayFormat: 'jYYYY-jMM-jDD',
                    editable: false,
                    inputClass: 'form-control my-custom-class-name',
                    placeholder: 'زمان ثبت را انتخاب کنید',
                    altFormat: 'YYYY-MM-DD HH:mm',
                    color: '#18181B',
                    autoSubmit: false,
                }
            })
            .use(PrimeVue, {
                theme: {
                    preset: AuraCustomPreset,
                    options: {
                        darkModeSelector: 'class',
                        cssLayer: false
                    }
                }
            })
            .component('quill-editor', QuillEditor , {
                theme: 'snow',
            })
            .mount(el);
    },
});