import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { toSass } from './src/libs/sass-utils'
import theme from './src/libs/theme'

export default defineConfig({
    plugins: [
        vue(),
        Components({
            dirs: ['src/components'],
            extensions: ['vue'],
            deep: true,
            dts: 'src/components.d.ts',
            directoryAsNamespace: true,
        }),
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url)),
        },
    },
    server: {
        port: 3000,
    },
    css: {
        preprocessorOptions: {
            scss: {
                api: 'modern-compiler',
                additionalData:
                    '@use "/src/styles/_functions.scss" as *; @use "/src/styles/_font-style.scss" as *;',
                functions: {
                    'get($keys)': function (keys) {
                        keys = keys.toString().replace(/['"]+/g, '').split('.')

                        let result = theme
                        for (let i = 0; i < keys.length; i++) {
                            result = result[keys[i]]
                        }

                        return toSass(result)
                    },
                    'getColors()': function () {
                        return toSass(theme.colors)
                    },
                    'getThemes()': function () {
                        return toSass(theme.themes)
                    },
                },
            },
        },
    },
})