import { createApp } from 'vue';
import '@mdi/font/css/materialdesignicons.css';
import 'vuetify/styles';
import './styles/app.css';
import { allComponents, provideFluentDesignSystem } from '@fluentui/web-components';
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';
import App from './App.vue';

provideFluentDesignSystem().register(allComponents);

const vuetify = createVuetify({
  components,
  directives,
  theme: {
    defaultTheme: 'depreCoreDark',
    themes: {
      depreCore: {
        dark: false,
        colors: {
          background: '#f7f8fb',
          surface: '#ffffff',
          primary: '#2457a6',
          secondary: '#006c6a',
          accent: '#8f4f00',
          info: '#3f6f99',
          success: '#2f7d4b',
          warning: '#a56a00',
          error: '#b3261e'
        }
      },
      depreCoreDark: {
        dark: true,
        colors: {
          background: '#11161d',
          surface: '#171d25',
          primary: '#8fb8ff',
          secondary: '#54d3c7',
          accent: '#f2b36b',
          info: '#9cc8e8',
          success: '#8fd7a3',
          warning: '#f0c06a',
          error: '#ffb4ab'
        }
      },
      depreCoreOcean: {
        dark: true,
        colors: {
          background: '#0b1620',
          surface: '#10212f',
          primary: '#4fd1c5',
          secondary: '#6aa9ff',
          accent: '#f6ad55',
          info: '#7cc4f0',
          success: '#7ee0a0',
          warning: '#f6c453',
          error: '#ff8f87'
        }
      },
      depreCoreSlate: {
        dark: true,
        colors: {
          background: '#17191e',
          surface: '#21242b',
          primary: '#aab4ff',
          secondary: '#8fd3c8',
          accent: '#d9b38c',
          info: '#a9c4dd',
          success: '#8fd7a3',
          warning: '#e6c06a',
          error: '#f2a59c'
        }
      },
      depreCoreContrast: {
        dark: true,
        colors: {
          background: '#000000',
          surface: '#0d0d0d',
          primary: '#ffd400',
          secondary: '#00e5ff',
          accent: '#ff4081',
          info: '#40c4ff',
          success: '#00e676',
          warning: '#ffea00',
          error: '#ff5252'
        }
      },
      depreCoreSepia: {
        dark: false,
        colors: {
          background: '#f3ead6',
          surface: '#fbf6ea',
          primary: '#9a5b2f',
          secondary: '#2f6f6a',
          accent: '#b3791f',
          info: '#3f6f99',
          success: '#2f7d4b',
          warning: '#a56a00',
          error: '#b3261e'
        }
      }
    }
  },
  defaults: {
    VBtn: { rounded: 'sm', style: 'text-transform:none; letter-spacing:0' },
    VCard: { rounded: 'sm' },
    VTextField: { variant: 'outlined', density: 'compact' },
    VSelect: { variant: 'outlined', density: 'compact' },
    VTextarea: { variant: 'outlined', density: 'compact' },
    VDataTable: { density: 'comfortable' }
  }
});

createApp(App).use(vuetify).mount('#app');
