import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
import path from 'path'
const pathSrc = path.resolve(__dirname, 'src')
import { viteMockServe } from 'vite-plugin-mock'
import UnoCSS from 'unocss/vite'
import { presetAttributify, presetIcons, presetUno } from 'unocss'

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import mkcert from 'vite-plugin-mkcert'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import DefineOptions from 'unplugin-vue-define-options/vite'
import vueJsx from '@vitejs/plugin-vue-jsx'
import setupExtend from './src/plugins/vite-plugin-setup-extend'
export default ({ mode }) => {
  return {
    base: './',
    server: {
      port: 5010,
      https: false,
      host: true, //'0.0.0.0'
      open: false
    },
    preview: {
      port: 5002,
      host: '0.0.0.0',
      strictPort: true
    },
    plugins: [
      vue({ reactivityTransform: true }),
      vueJsx(),
      AutoImport({
        imports: ['vue', 'vue-router'],
        //配置后会自动扫描目录下的文件
        dirs: ['src/hooks/**', 'src/utils/**', 'src/store/**', 'src/api/**'],
        eslintrc: {
          enabled: true, // Default `false`
          filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
          globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
        },
        dts: './typings/auto-imports.d.ts'
      }),
      Components({
        // relative paths to the directory to search for components.
        dirs: ['src/components'],
        // valid file extensions for components.
        extensions: ['vue'],
        // search for subdirectories
        deep: true,
        // resolvers for custom components
        resolvers: [],
        dts: './typings/components.d.ts'
      }),
      UnoCSS({
        presets: [presetUno(), presetAttributify(), presetIcons()]
      }),
      createSvgIconsPlugin({
        //将src/icons/common和src/icons/nav-bar下的svg图片加入到配置中
        iconDirs: [path.resolve(process.cwd(), 'src/icons/common'), path.resolve(process.cwd(), 'src/icons/nav-bar')],
        // appoint svg icon using mode
        symbolId: 'icon-[dir]-[name]'
      }),
      mkcert(),
      DefineOptions(),
      vueJsx(),
      createSvgIconsPlugin({
        // config svg dir that can config multi
        iconDirs: [path.resolve(process.cwd(), 'src/icons/common'), path.resolve(process.cwd(), 'src/icons/nav-bar')],
        // appoint svg icon using mode
        symbolId: 'icon-[dir]-[name]'
      }),
      viteMockServe({
        supportTs: true,
        mockPath: 'mock',
        localEnabled: true,
        prodEnabled: true,
        injectCode: `
          import { setupProdMockServer } from './mock-prod-server';
          setupProdMockServer();
        `,
        logger: true
      }),
      // myExample({ title: '熊猫哥' }),
      setupExtend({ title: '熊猫哥' })
    ],
    resolve: {
      alias: {
        '@/': `${pathSrc}/`
      }
    }
  }
}