import type { NextConfig } from 'next'
import createMDX from '@next/mdx'
import remarkSmartypants from 'remark-smartypants'
import remarkMath from 'remark-math'
import remarkGfm from 'remark-gfm'
import rehypeSlug from 'rehype-slug'
import rehypeExternalLinks from 'rehype-external-links'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
import rehypePrettyCode from 'rehype-pretty-code'
import { transformerCopyButton } from '@rehype-pretty/transformers'
import rehypeKatex from 'rehype-katex'
import type { Element } from 'hast'
import type { LineElement } from 'rehype-pretty-code'

const nextConfig: NextConfig = {
  output: 'export',
  trailingSlash: true,
  images: { unoptimized: true },
}

const withMDX = createMDX({
  options: {
    remarkPlugins: [remarkSmartypants, remarkMath, remarkGfm],
    rehypePlugins: [
      rehypeSlug,
      [rehypeExternalLinks, { target: '_blank', rel: ['nofollow', 'noopener', 'noreferrer'] }],
      rehypeAutolinkHeadings,
      [rehypePrettyCode, {
        theme: { light: 'github-light', dark: 'github-dark-dimmed' },
        keepBackground: false,
        lineNumbers: true,
        filterMetaString: (metaString: string | undefined) => (metaString || '') + ' showLineNumbers',
        grid: true,
        onVisitLine(node: LineElement) {
          if (node.children.length === 0) {
            node.children = [{ type: 'text', value: ' ' }]
          }
        },
        onVisitTitle(element: Element) {
          const existingClassNames = Array.isArray(element.properties.className)
            ? element.properties.className
            : []
          element.properties.className = [...existingClassNames, 'vscode-title']
          element.children = [
            {
              type: 'element',
              tagName: 'span',
              properties: { className: ['vscode-dots'] },
              children: [
                { type: 'element', tagName: 'span', properties: { className: ['dot-red'] }, children: [] },
                { type: 'element', tagName: 'span', properties: { className: ['dot-yellow'] }, children: [] },
                { type: 'element', tagName: 'span', properties: { className: ['dot-green'] }, children: [] },
              ],
            },
            element.children[0],
          ]
        },
        transformers: [
          transformerCopyButton({ visibility: 'hover', feedbackDuration: 2500 }),
        ],
      }],
      rehypeKatex,
    ],
  },
})

export default withMDX(nextConfig)