import path from 'path'
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Pages from 'vite-plugin-pages'
import Layouts from 'vite-plugin-vue-layouts'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'
import Unocss from 'unocss/vite'
import { presetAttributify, presetUno } from 'unocss'
import presetIcons from '@unocss/preset-icons'
import AutoImport from 'unplugin-auto-import/vite'
import VueI18n from '@intlify/vite-plugin-vue-i18n'
import Markdown from 'vite-plugin-md'
import Inspect from 'vite-plugin-inspect'

export default defineConfig({
  resolve: {
    alias: {
      '~/': `${path.resolve(__dirname, 'src')}/`,
			'@/': `${path.resolve(__dirname, 'src/components')}/`,
    },
  },
  plugins: [
		Vue({
      include: [/\.vue$/, /\.md$/], // <--
    }),

    // https://github.com/hannoeru/vite-plugin-pages
		Pages({
      extensions: ['vue', 'md'],
    }),
		// imagetools(),
		Layouts({
      layoutsDir: 'src/layouts',
      defaultLayout: 'Default'
    }),
    // https://github.com/antfu/unplugin-auto-import
    AutoImport({
			include: [
				/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
				/\.vue$/, /\.vue\?vue/, // .vue
				/\.md$/, // .md  
			],
      imports: [
				'vue',
        'vue-router',
				'vue-i18n',
//				'vuex',
        '@vueuse/head',
        '@vueuse/core',
      ],
      dts: true,
    }),

    // https://github.com/antfu/vite-plugin-components
    Components({
			// allow auto load markdown components under `./src/components/`
			extensions: ['vue', 'md'],
      resolvers: [
        // auto import icons
        // https://github.com/antfu/vite-plugin-icons
        IconsResolver({
          componentPrefix: '',
					enabledCollections: ['carbon'],
        }),
      ],
			// allow auto import and register components used in markdown
			include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
      dts: true,
    }),

    // https://github.com/antfu/vite-plugin-icons
    Icons({
      autoInstall: true,
    }),
		VueI18n({
      runtimeOnly: true,
      compositionOnly: true,
      include: [path.resolve(__dirname, 'locales/**')],
    }),
		// https://github.com/antfu/vite-plugin-md
    Markdown({
    }),
		// https://github.com/antfu/vite-plugin-inspect
    Inspect({
      // change this to enable inspect for debugging
      enabled: false,
    }),
    // https://github.com/antfu/unocss
    Unocss({
      shortcuts: [
				{
          'btn': 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50',
					'icon-btn': 'text-[0.9em] inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-indigo-900',
					'section-headline': 'font-normal sm:text-xl racking-widest border-indigo-300 text-indigo-700 dark:text-indigo-400 border-l-8 pl-2 mb-2',
					'hr-sep': 'mt-4 mb-3 text-indigo-200 dark:text-indigo-600',
					'hr-sep-itms': 'mt-3 mb-3 text-indigo-200 dark:text-gray-500',
					'panel-group': 'font-light text-lg px-1 mb-12 dark:text-dark-900',
					'nav-item': 'ml-5 hover:-mt-1 hover:border-b-2 hover:border-indigo-500 text-[0.9em] cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-indigo-900 dark:bg-cool-gray-800 dark:text-white dark:hover:text-indigo-200  dark:hover:border-indigo-200">',
					'h2-title': 'text-xl font-semibold mb-4 text-indigo-500 dark:text-indigo-900',
          'sectionitem': 'mt-2 text-sm text-gray-600 dark:text-gray-500',			
					'tag-list': 'inline-flex gap-2 w-full  flex-wrap',
					'tag-item': 'rounded-xl dark:text-gray-100 bg-gray-200 dark:bg-gray-600 px-3 py-1 text-xs leading-5 mr-2',
					'left-item': 'lg:inline-block lg:w-2/12 lg:align-top italic mb-2 pr-2',
					'right-item': 'lg:inline-block lg:w-10/12 w-full',
				  'box': 'py-8 px-8 inline-flex mx-auto bg-white dark:bg-gray-400 dark:bg-opacity-10 rounded-xl shadow-md space-y-2',
          'btn-msg': 'px-4 py-1 text-sm text-indigo-600 dark:text-indigo-400 font-semibold rounded-full border border-indigo-200 dark:border-indigo-800 hover:text-white hover:bg-indigo-600 hover:border-transparent focus:outline-none hover:dark:text-indigo-100 focus:ring-2 ring-indigo-600 ring-opacity-40 bg-gray-300 dark:bg-gray-700',
					'checkbox': 'form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer',					
					'helpbox': 'border border-gray-500 p-2 my-2 text-sm text-indigo-700 dark:text-indigo-400 font-normal rounded-tl-xl rounded-tr-xl bg-gray-100 dark:bg-gray-900',
					'input-fld': 'appearance-none bg-transparent border-none w-full text-gray-700 dark:text-gray-200 leading-tight focus:outline-none', 
					'input-lbl': 'text-gray-600 dark:text-gray-300 text-sm',
				/// dynamic shortcuts
        // [/^btn-(.*)$/, ([, c]) => `bg-${c}-400 text-${c}-100 py-2 px-4 rounded-lg`],
				}
			],
      presets: [
        presetUno(),
        presetAttributify(),
        presetIcons({
          scale: 1.2,
        }),
      ],
    }),
  ],

  server: {
    fs: {
      strict: true,
    },
  },
	build: {
		sourcemap: false,
	},
  optimizeDeps: {
    include: [
      'vue',
      'vue-router',
			'vue-i18n',
      '@vueuse/core',
			'@vueuse/head',
    ],
    exclude: [
      'vue-demi',
    ],
  },
})