// Vuetify
import "vuetify/styles";
import '@mdi/font/css/materialdesignicons.css'
import {createVuetify, type ThemeDefinition} from "vuetify";
import * as baseComponents from "vuetify/components";
import * as directives from "vuetify/directives";
import { VCalendar } from 'vuetify/labs/VCalendar';
import { VTimePicker } from 'vuetify/labs/VTimePicker';

/**
 * Example of custom Theme
 * @type {{dark: boolean, colors: {magenta: string, pink: string, green: string, lightpink: string, yellow: string, error: string, darkblueshade: string, accent: string, secondary: string, orange: string, red: string, gray: string, lightblue: string, white: string, success: string, neutralgray: string, warning: string, darkblue: string, muted: string, lightgray: string, primary: string, info: string}}}
 */
const customTheme: ThemeDefinition = {
    dark: false,
    colors: {
        primary: "#673AB7",
        secondary: "#424242",
        accent: "#82B1FF",
        error: "#FF5252",
        info: "#2196F3",
        success: "#4CAF50",
        warning: "#FFC107",
        lightblue: "#14c6FF",
        yellow: "#FFCF00",
        pink: "#FF1976",
        orange: "#FF8657",
        magenta: "#C33AFC",
        darkblue: "#1E2D56",
        gray: "#909090",
        neutralgray: "#9BA6C1",
        green: "#2ED47A",
        red: "#FF5c4E",
        darkblueshade: "#308DC2",
        lightgray: "#BDBDBD",
        lightpink: "#FFCFE3",
        white: "#FFFFFF",
        muted: "#6c757d",
    },
};

const vuetify = createVuetify({
    components: {
        ...baseComponents,
        VCalendar,
        VTimePicker,
    },
    directives,
    theme: {
        defaultTheme: 'customTheme',
        themes: {
            customTheme,
        },
    },
    icons: {
        defaultSet: 'mdi', // This is already the default value - only for display purposes
    },
});

export default vuetify;