import { defineMDSveXConfig as defineConfig } from 'mdsvex';
import rehypeExternalLinks from 'rehype-external-links';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
import readingTime from 'mdsvex-reading-time';
import remarkUnwrapImages from 'remark-unwrap-images';
import remarkToc from 'remark-toc';
import rehypeSlug from 'rehype-slug';
import { visit } from 'unist-util-visit';
import { toString } from 'mdast-util-to-string';
import Slugger from 'github-slugger';
import remarkFFF from 'remark-fff';
import remarkFootnotes from 'remark-footnotes';
// import { shikiTwoslashHighlighter } from '@kitbook/mdsvex-shiki-twoslash';
// import createShikiHighlighter from './src/lib/utils/shiki-highlighter.js';
// const shiki = await createShikiHighlighter({
// 	theme: 'github-dark-dimmed',
// 	showLineNumbers: (n) => true
// });
// highlighter
import { escapeSvelte } from 'mdsvex';
import { lex, parse as parseFence } from 'fenceparser';
import { renderCodeToHTML, runTwoSlash, createShikiHighlighter } from 'shiki-twoslash';

/** @type {import('mdsvex').MdsvexOptions} */
const config = defineConfig({
	extensions: ['.svelte.md', '.md', '.svx'],
	smartypants: {
		dashes: 'oldschool'
	},
	// layout: {
	// 	_: './src/lib/components/blog/Post.svelte'
	// },
	highlight: {
		highlighter: async (code, lang, meta) => {
			let fence, twoslash;
			try {
				fence = parseFence(lex([lang, meta].filter(Boolean).join(' ')));
			} catch (error) {
				throw new Error(`Could not parse the codefence for this code sample \n${code}`);
			}
			if (fence?.twoslash === true) twoslash = runTwoSlash(code, lang);
			return `{@html \`${escapeSvelte(
				renderCodeToHTML(
					code,
					lang,
					fence ?? {},
					{ themeName: 'github-dark-dimmed' },
					await createShikiHighlighter({ theme: 'github-dark-dimmed' }),
					twoslash
				)
			)}\` }`;
		}
	},
	// highlight: {
	// 	highlighter: shiki
	// },
	/* Wait for skeleton to implement Prismjs, for now use <CodeBlock /> in .md files */
	// layout: {
	// 	blog: './src/lib/components/blog/_blog-layout.svelte',
	// 	project: './src/lib/components/projects/_project-layout.svelte',
	// 	_: './src/lib/components/fallback/_layout.svelte'
	// },
	/* Plugins */
	rehypePlugins: [
		[rehypeSlug],
		[rehypeAutolinkHeadings, { behavior: 'wrap' }],
		[
			rehypeExternalLinks,
			{
				rel: ['nofollow', 'noopener', 'noreferrer', 'external'],
				target: '_blank'
			}
		]
		// 	[
		// 		/** Custom rehype plugin to add loading="lazy" to all images */
		// 		() => {
		// 			return (tree) => {
		// 				visit(tree, 'element', (node) => {
		// 					if (node.tagName === 'img') {
		// 						node.properties.loading = 'lazy';
		// 					}
		// 				});
		// 			};
		// 		}
		// 	]
	],
	remarkPlugins: [
		[remarkToc, { maxDepth: 3, tight: true }],
		[
			remarkFFF,
			{
				presets: [],
				target: 'mdsvex',
				autofill: {
					provider: 'fs',
					path: (path) => path.replace('/src/routes/', '/urara/')
				},
				strict: {
					media: {
						type: 'string',
						array: false
					}
				}
			}
		],
		[readingTime, { wpm: 200 }],
		[remarkFootnotes, { inlineNotes: true }]
		// 	[
		// 		headings,
		// 		{
		// 			behavior: 'append',
		// 			linkProperties: {},
		// 			content: function (node) {
		// 				return [
		// 					h('span.icon.icon-link header-anchor', {
		// 						ariaLabel: toString(node) + ' permalink'
		// 					})
		// 				];
		// 			}
		// 		}
		// 	],

		// 	remarkHeadingsPermaLinks,
		// 	getHeadings
	]
});

export default config;