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 './Client/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 i18n from './Client/i18n';
import { ZiggyVue } from 'ziggy-js';
import { Ziggy } from './ziggy.js';
import Vue3Toastify from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';


const pinia = createPinia();

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

createInertiaApp({
    resolve: name => resolvePageComponent(`./Client/Pages/${name}.vue`, import.meta.glob('./Client/Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(pinia)
            .use(ZiggyVue, Ziggy)
            .use(i18n)
            .use(ToastService , {
                icon: false,
            })
            .use(ConfirmationService)
            .use(Vue3Toastify, {
                autoClose: 3000,
                position: 'top-right',
                rtl: true,
                theme: 'colored',
                hideProgressBar: false,
                closeOnClick: true,
                pauseOnHover: true,
                draggable: true,
                draggablePercent: 0.6,
                showCloseButtonOnHover: false,
                closeButton: true,
                icon: true,
                limit: 3,
                transition: 'default',
                dangerouslyHTMLString: false,
                toastStyle: {
                    opacity: '1',
                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
                },
                bodyStyle: {
                    fontSize: '14px',
                    fontFamily: 'inherit',
                },
                progressBarStyle: {
                    background: 'linear-gradient(to right, #4CAF50, #45a049)',
                },
            })
            .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
                    }
                }
            })
            .mount(el);
    },
});