import './global-styles/atomic.css';
import './global-styles/components.css';
import './global-styles/colors.css';
import './global-styles/mlfe.css';
import './global-styles/transitions.css';
import 'vue-toast-notification/dist/theme-default.css';

import NicerForm from './components/inputs/NicerForm.vue';
import PillBar from './components/inputs/PillBar.vue';
import TextBox from './components/inputs/TextBox.vue';
import EnumInput from './components/inputs/EnumInput.vue';
import NumberBox from './components/inputs/NumberBox.vue';
import MultilineTextBox from './components/inputs/MultilineTextBox.vue';
import CheckBox from './components/inputs/CheckBox.vue';
import SingleSelect from './components/inputs/SingleSelect.vue';
import MultiSelect from './components/inputs/MultiSelect.vue';
import Heading from './components/display/Heading.vue';

import { Form, Field, ErrorMessage  } from 'vee-validate';

import App from './App.vue';
import { createHead } from '@vueuse/head';
import { createRouter, createWebHistory } from 'vue-router';
import routes from '~pages';
import ToastPlugin from 'vue-toast-notification';

const app = createApp(App);
const head = createHead();
const router = createRouter({
  history: createWebHistory(),
  routes,
});

app.use(router);
app.use(head);
app.use(ToastPlugin);

// Global Components
app.component('NicerForm', NicerForm);
app.component('PillBar', PillBar);
app.component('TextBox', TextBox);
app.component('NumberBox', NumberBox);
app.component('MultilineTextBox', MultilineTextBox);
app.component('CheckBox', CheckBox);
app.component('ValidationForm', Form);
app.component('Field', Field);
app.component('ErrorMessage', ErrorMessage);
app.component('SingleSelect', SingleSelect);
app.component('MultiSelect', MultiSelect);
app.component('EnumInput', EnumInput);
app.component('Heading', Heading);


app.mount('#app');