import { createApp } from 'vue';
import router from './router';
import { createPinia } from 'pinia';
import { arrayFilter } from './mixins';
import { unifiedFilter } from './utils/filter';
import { sortData, setHeaderActive } from './utils/sort';
import { clickOutsideDirective, scrollIntoViewDirective, swipeDirective } from './directives';
import { IndexableArray } from './types';
import { FilterFactory } from './utils/filter';
import App from './app.vue';

// Import all the necessary locales and plugins for dayjs
import dayjs from 'dayjs';
import localizedFormat from 'dayjs/plugin/localizedFormat';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
import relativeTime from 'dayjs/plugin/relativeTime';
import duration from 'dayjs/plugin/duration';

dayjs.extend(duration);
dayjs.extend(localizedFormat);
dayjs.extend(relativeTime);
dayjs.extend(timezone);
dayjs.extend(utc);

// Use store and router
const app = createApp(App);
const pinia = createPinia();
app.use(pinia).use(router);

// Register directives
app.directive('click-outside', clickOutsideDirective);
app.directive('scroll-into-view', scrollIntoViewDirective);
app.directive('swipe', swipeDirective);

// Register global mixins
app.mixin({
    methods: {
        filteredData(data: IndexableArray[], filters: FilterFactory[]) {
            return arrayFilter(data, filters);
        },
        unifiedFilteredData(data: IndexableArray[], filters: FilterFactory[], searchQuery: string) {
            return unifiedFilter(data, filters, searchQuery);
        },
        searchFilteredData(data: IndexableArray[], filters: FilterFactory[], searchQuery: string) {
            if (searchQuery) {
                return unifiedFilter(data, filters, searchQuery);
            }
            return arrayFilter(data, filters);
        },
        sortData,
        setHeaderActive
    }
});

// Mount the app
app.mount('#app');

export default app;