import { defineConfig } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver, VantResolver } from 'unplugin-vue-components/resolvers'

/** 与 xuexiaole-web 一致：构建/开发时将绝大部分 px 转为 vw（设计稿宽 1920） */
const pxToViewport = (options = {}) => {
  const defaultOptions = {
    unitToConvert: 'px',
    viewportWidth: 1920,
    viewportHeight: 1200,
    unitPrecision: 2,
    propList: ['*'],
    viewportUnit: 'vw',
    fontViewportUnit: 'vw',
    selectorBlackList: ['.px-w'],
    minPixelValue: 1,
    mediaQuery: true,
    replace: true,
    landscape: false,
    landscapeUnit: 'vw',
    landscapeWidth: 1920,
  }

  const opts = { ...defaultOptions, ...options }

  return {
    postcssPlugin: 'postcss-px-to-viewport',
    Declaration(decl: { value: string }) {
      if (!decl.value.includes('px')) return

      const pxRegex = /(\d*\.?\d+)px/g
      decl.value = decl.value.replace(pxRegex, (match, group) => {
        const pixels = parseFloat(group)
        if (pixels <= opts.minPixelValue) return match

        const vw = ((pixels / opts.viewportWidth) * 100).toFixed(opts.unitPrecision)
        return `${vw}${opts.viewportUnit}`
      })
    },
  }
}
pxToViewport.postcss = true

const dir = (url: string): string => path.resolve(__dirname, url)

export default defineConfig({
  resolve: {
    alias: {
      '@': dir('src'),
      '@c': dir('src/components'),
      '@p': dir('src/plugins'),
    },
  },
  plugins: [
    vue(),
    vueJsx(),
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      resolvers: [ElementPlusResolver(), VantResolver()],
      eslintrc: {
        enabled: true,
        filepath: '.auto-import.json',
        globalsPropValue: true,
      },
      dirs: ['src/stores'],
      dts: dir('.auto-import.d.ts'),
    }),
    Components({
      dirs: ['src/components'],
      extensions: ['vue', 'tsx'],
      resolvers: [ElementPlusResolver(), VantResolver()],
      dts: dir('.components.d.ts'),
    }),
  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @use "@/styles/variate.scss" as *;
        `,
        api: 'modern',
        silenceDeprecations: ['legacy-js-api'],
      },
    },
    postcss: {
      plugins: [
        pxToViewport({
          viewportWidth: 1920,
          viewportHeight: 1200,
          unitPrecision: 2,
          selectorBlackList: ['.px-w'],
        }),
      ],
    },
  },
  server: {
    port: 5173,
    host: '0.0.0.0',
    open: true,
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8080',
        changeOrigin: true,
      },
    },
  },
})