import { build, context } from 'esbuild'
import vue from 'esbuild-plugin-vue'
import progress from 'esbuild-plugin-progress'
import { esbuildPluginFileSize } from 'esbuild-plugin-filesize'
import esbuildStylePlugin from 'esbuild-style-plugin'
import autoprefixer from 'autoprefixer'
import postcssPresetEnv from 'postcss-preset-env'
import postcssImport from 'postcss-import'
import postcssMinify from 'postcss-minify'
import esbuildPluginBowserSync from 'esbuild-plugin-browser-sync'
import esbuildHtmlPlugin from '@fallen_leaves/esbuild-plugin-html'
import components from './components.js'
// 包名
const libraryName = 'fa-ui'
const globalName = 'FaUI'

// 打包组件库
async function buildLibrary () {
  await build({
    entryPoints: ['packages/index.ts'],
    outfile: `lib/${libraryName}.js`,
    bundle: true,
    format: 'esm',
    tsconfig: 'tsconfig.json',
    treeShaking: true,
    external: ['vue'],
    assetNames: '[dir]/[name]-[hash]',
    loader: {
      '.eot': 'file',
      '.svg': 'file',
      '.ttf': 'file',
      '.woff': 'file'
    },
    define: {
      '__VUE_OPTIONS_API__': 'true',
      '__VUE_PROD_DEVTOOLS__': 'false'
    },
    plugins: [
      esbuildStylePlugin({
        postcss: {
          plugins: [
            autoprefixer({
              overrideBrowserslist: ['last 10 version']
            }),
            postcssImport(),
            postcssPresetEnv(),
            postcssMinify()
          ]
        }
      }),
      vue(),
      progress(),
      esbuildPluginFileSize()
    ]
  })

  await build({
    entryPoints: ['packages/index.ts'],
    outfile: `lib/${libraryName}.min.js`,
    bundle: true,
    format: 'iife',
    tsconfig: 'tsconfig.json',
    globalName,
    treeShaking: true,
    minify: true,
    external: ['vue'],
    define: {
      '__VUE_OPTIONS_API__': 'true',
      '__VUE_PROD_DEVTOOLS__': 'false'
    },
    loader: {
      '.eot': 'dataurl',
      '.svg': 'dataurl',
      '.ttf': 'dataurl',
      '.woff': 'dataurl'
    },
    plugins: [
      esbuildStylePlugin({
        postcss: {
          plugins: [
            autoprefixer({
              overrideBrowserslist: ['last 10 version']
            }),
            postcssImport(),
            postcssPresetEnv(),
            postcssMinify()
          ]
        }
      }),
      vue(),
      progress(),
      esbuildPluginFileSize()
    ]
  })

  await build({
    entryPoints: Object.values(components),
    outdir: 'lib',
    bundle: true,
    format: 'esm',
    tsconfig: 'tsconfig.json',
    treeShaking: true,
    external: ['vue'],
    assetNames: '[dir]/[name]',
    loader: {
      '.eot': 'dataurl',
      '.svg': 'dataurl',
      '.ttf': 'dataurl',
      '.woff': 'dataurl'
    },
    mainFields: ['module'],
    define: {
      '__VUE_OPTIONS_API__': 'true',
      '__VUE_PROD_DEVTOOLS__': 'false'
    },
    plugins: [
      esbuildStylePlugin({
        postcss: {
          plugins: [
            autoprefixer({
              overrideBrowserslist: ['last 10 version']
            }),
            postcssImport(),
            postcssPresetEnv(),
            postcssMinify()
          ]
        }
      }),
      vue(),
      progress()
    ]
  })

}

// 打包预览页面
async function buildExamples () {
  const ctx = await context({
    entryPoints: ['examples/main.ts'],
    outdir: 'dist/static',
    bundle: true,
    tsconfig: 'tsconfig.json',
    format: 'iife',
    sourcemap: true,
    loader: {
      '.eot': 'file',
      '.svg': 'file',
      '.ttf': 'file',
      '.woff': 'file'
    },
    define: {
      '__VUE_OPTIONS_API__': 'true',
      '__VUE_PROD_DEVTOOLS__': 'false'
    },
    plugins: [
      esbuildStylePlugin({
        postcss: {
          plugins: [
            autoprefixer({
              overrideBrowserslist: ['last 10 version']
            }),
            postcssImport(),
            postcssPresetEnv(),
            postcssMinify()
          ]
        }
      }),
      vue(),
      progress(),
      esbuildHtmlPlugin({
        template: 'examples/index.html',
        filename: 'dist/index.html',
        minify: true
      }),
      esbuildPluginBowserSync({
        server: 'dist'
      })
    ]
  })
  await ctx.watch()
}

// 启动函数
(async (isServe) => {
  if (isServe) {
    buildExamples()
  } else {
    buildLibrary()
  }
})(process.argv.includes('serve'))