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

export default defineConfig({
    main: {},
    preload: {},
    renderer: {
        plugins: [
            vue(),
            Components({
                dirs: ['src/renderer/src/components'],
                extensions: ['vue'],
                deep: true,
                dts: 'src/renderer/src/components.d.ts',
                directoryAsNamespace: true,
            }),
        ],
        resolve: {
            alias: {
                '@': resolve('src/renderer/src'),
            },
        },
        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)
                        },
                    },
                },
            },
        },
    },
})