import './assets/main.css'
import { createPinia } from 'pinia';
import 'vuetify/styles';
import { createVuetify } from "vuetify";
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';
import { aliases, mdi } from 'vuetify/iconsets/mdi';
import '@mdi/font/css/materialdesignicons.css';
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";
import Toast, {POSITION} from "vue-toastification";
import type { PluginOptions } from "vue-toastification";
import "vue-toastification/dist/index.css";

const app = createApp(App);

const options: PluginOptions = {
    position: POSITION.TOP_CENTER,
    timeout: 3000,
    closeOnClick: true,
    pauseOnHover: true,
};

const vuetify = createVuetify({
    theme: {
        defaultTheme: 'light',
        themes: {
            light: {
                colors: {
                    background: '#FFFFFF',
                    surface: '#FFFFFF',
                    'surface-bright': '#FFFFFF',
                    'surface-light': '#EEEEEE',
                    'surface-variant': '#424242',
                    'on-surface-variant': '#EEEEEE',
                    primary: '#1867C0',
                    'primary-darken-1': '#1F5592',
                    secondary: '#48A9A6',
                    'secondary-darken-1': '#018786',
                    error: '#B00020',
                    info: '#2196F3',
                    success: '#4CAF50',
                    warning: '#FB8C00',
                },
            },
            dark: {
                colors: {
                    primary: '#2196F3',
                    secondary: '#424242',
                    accent: '#FF4081',
                },
            },
        },
    },
    components,
    directives,
    icons: { defaultSet: 'mdi', aliases, sets: { mdi } },
});

const pinia = createPinia();

app.use(pinia);
app.use(Toast, options);
app.use(vuetify);
app.use(router);
app.mount("#app");