import { defineMDSveXConfig as defineConfig } from 'mdsvex';
import remarkExternalLinks from 'remark-external-links';
import remarkSetImagePath from './src/lib/utils/remark-set-image-path.js';
import remarkLinkWithImageAsOnlyChild from './src/lib/utils/remark-link-with-image-as-only-child.js';
import rehypeImgSize from 'rehype-img-size';

import remarkUnwrapImages from 'remark-unwrap-images';
import remarkToc from 'remark-toc';
import rehypeSlug from 'rehype-slug';

// import { highlightCode } from './src/lib/utils/highlighter.js';

/** @type {import('mdsvex').MdsvexOptions} */
const config = defineConfig({
	extensions: ['.svelte.md', '.md', '.svx'],
	smartypants: {
		dashes: 'oldschool'
	},
	/* 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],
		[rehypeImgSize]
		// 	[
		// 		/** 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 }],
		[
			(remarkExternalLinks,
			{
				target: '_blank'
			})
		],
		[remarkUnwrapImages],
		remarkSetImagePath,
		remarkLinkWithImageAsOnlyChild
		// 	[
		// 		headings,
		// 		{
		// 			behavior: 'append',
		// 			linkProperties: {},
		// 			content: function (node) {
		// 				return [
		// 					h('span.icon.icon-link header-anchor', {
		// 						ariaLabel: toString(node) + ' permalink'
		// 					})
		// 				];
		// 			}
		// 		}
		// 	],

		// 	remarkHeadingsPermaLinks,
		// 	getHeadings
	]
});

export default config;