import { createVuetify } from 'vuetify'
import 'vuetify/styles'
import { aliases, fa } from 'vuetify/iconsets/fa'
import '@fortawesome/fontawesome-free/css/all.css'
import { en } from 'vuetify/locale'
import { defineNuxtPlugin } from '#app'

interface Theme {
  dark: boolean,
  colors: {
    'background': string,
    'on-background': string,
    'surface': string,
    'on-surface': string,
    'primary': string,
    'on-primary': string,
  }
}

export const lightTheme: Theme = {
  dark: false,
  colors: {
    'background': '#ffffff',
    'on-background': '#333333',
    'on-background--clickable': '#404040',

    'surface': '#f9f9f9',
    'on-surface': '#4d4d4d',

    'primary': '#e6e6e6',
    'on-primary': '#1a1a1a',
    'on-primary--clickable': '#4d4d4d',
  }
}

export const darkTheme: Theme = {
  dark: true,
  colors: {
    'background': '#1a1a1a',
    'on-background': '#e6e6e6',
    'on-background--clickable': '#e6e6e6',

    'surface': '#262626',
    'on-surface': '#ffffff',

    'primary': '#13263a',
    'on-primary': '#e6e6e6',
    'on-primary-alt--clickable': '#ffffff',
  }
}

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    ssr: true,
    locale: {
      locale: 'en',
      messages: { en },
    },
    theme: {
      defaultTheme: 'dark',
      themes: {
        light: lightTheme,
        dark: darkTheme
      },
    },
    icons: {
      defaultSet: 'fa',
      aliases,
      sets: {
        fa,
      },
    },
  })
  nuxtApp.vueApp.use(vuetify)
})