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

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import {VitePWA} from 'vite-plugin-pwa'
import UnoCSS from 'unocss/vite'
import {resolve} from "path";
import {AntDesignVueResolver, VantResolver} from 'unplugin-vue-components/resolvers';
import Components from 'unplugin-vue-components/vite'
import {useConfigStore} from "./src/store/configStore";
// import {colors} from './src/themeConfig'

// https://vitejs.dev/config/
// const config=useConfigStore()
export default defineConfig({
    plugins: [
        vue(),
        vueJsx(),
        VitePWA({
            registerType: 'autoUpdate',
            devOptions: {
                enabled: true,
                type: 'module',
            },
            workbox: {
                cleanupOutdatedCaches: true,
                clientsClaim: true,
                skipWaiting: true
            },
            strategies: 'injectManifest',
            base: '/',
            srcDir: 'src',
            filename: 'sw.ts',
            includeAssets: ['/favicon.png'],
            manifest: {
                name: ``,
                short_name: ``,
                start_url: '/',
                display: 'standalone',
                theme_color: '#0A1B37',
                orientation: "portrait-primary",
                background_color: 'white',
                icons: [
                    {
                        src: '32.png',
                        sizes: '32x32',
                        type: 'image/png',
                        purpose: 'any maskable',
                    },
                    {
                        src: '32.png',
                        sizes: '32x32',
                        type: 'image/png',
                    },
                    {
                        src: '192.png',
                        sizes: '192x192',
                        type: 'image/png',
                    },
                    {
                        src: '512.png',
                        sizes: '512x512',
                        type: 'image/png',
                    },
                    /*                    {
                                            src: 'icon-512.png',
                                            sizes: '512x512',
                                            type: 'image/png',
                                            purpose: 'any maskable',
                                        },*/
                ],
            },
        }),

        UnoCSS({
            configFile: './uno.config.ts',
        }),
        Components({
            resolvers: [AntDesignVueResolver({importStyle: 'less'}), VantResolver(),],
        }),
    ],
    esbuild: {
        supported: {
            'top-level-await': true //browsers can handle top-level-await features
        },
    },
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    server: {
        port: 3100,
    },
    build: {
        rollupOptions: {
            output: {
                manualChunks(id) {
                    if (
                        id.includes('node_modules/moment-jalaali')
                        || id.includes('node_modules/jalaali-js')
                        || id.includes('node_modules/moment/')
                        || id.includes('/src/utils/useDateTime')
                    ) {
                        return 'datetime'
                    }
                },
            },
        },
    },
    // base: `/single`,
    // base: `/customer`,
    css: {
        preprocessorOptions: {
            less: {
                modifyVars: {
                    // Used for global import to avoid the need to import each style file separately
                    // reference:  Avoid repeated references
                    hack: `; @import (reference) "${resolve('src/assets/css/var.less')}"`,
                },
                javascriptEnabled: true,
            },
        },
    },
})