import {
  addComponent,
  addTemplate,
  addTypeTemplate,
  createResolver,
  defineNuxtModule,
  installModule,
} from '@nuxt/kit'
import { globby } from 'globby'
import { FileSystemIconLoader } from 'unplugin-icons/loaders'
import IconsResolver from 'unplugin-icons/resolver'

export default defineNuxtModule({
  async setup(_, nuxt) {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-expect-error
    const resolver = createResolver(import.meta.url)

    const svgTransformer = (svg: string) => {
      return svg.replace(/^<svg /, '<svg fill="currentColor" ')
    }

    await installModule('unplugin-icons/nuxt', {
      customCollections: {
        'icon': FileSystemIconLoader(
          resolver.resolve('../assets/icons'),
          svgTransformer,
        ),
        'icon-s': FileSystemIconLoader(
          resolver.resolve('../assets/small-icons'),
          svgTransformer,
        ),
      },
    })

    const resolveIcon = IconsResolver({
      enabledCollections: [],
      customCollections: ['icon', 'icon-s'],
      prefix: 'ui',
    })

    // Icons
    const icons = (
      await globby('**/*.svg', {
        cwd: resolver.resolve('../assets/icons'),
      })
    ).map(icon => icon.replace('.svg', ''))

    const iconComponents = icons.map((icon) => {
      const name = `ui-icon-${icon}`
      const component = resolveIcon(name)

      return addComponent({
        name,
        filePath: component,
        global: 'sync',
      })
    })
    await Promise.all(iconComponents)

    // Small icons
    const smallIcons = (
      await globby('**/*.svg', {
        cwd: resolver.resolve('../assets/small-icons'),
      })
    ).map(icon => `s-${icon.replace('.svg', '')}`)

    const smallIconComponents = smallIcons.map((icon) => {
      const name = `ui-icon-${icon}`
      const component = resolveIcon(name)

      return addComponent({
        name,
        filePath: component,
        global: 'sync',
      })
    })
    await Promise.all(smallIconComponents)

    addTemplate({
      filename: 'ui/available-icons.mjs',
      getContents: () =>
        `export default ${JSON.stringify([icons, smallIcons].flat())}`,
    })

    addTypeTemplate({
      filename: 'types/ui/icons.d.ts',
      getContents: () => `
        const icons = ${JSON.stringify([icons, smallIcons].flat())} as const;
        export type UiIcon = typeof icons[number];
      `,
    })
  },
})