import { MdsvexOptions, defineMDSveXConfig as defineConfig } from 'mdsvex';
import headings from 'rehype-autolink-headings';
import remarkExternalLinks from 'remark-external-links';
import slug from 'rehype-slug';
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 { toString } from 'mdast-util-to-string';
import rehypeWrap from 'rehype-wrap-all';
import rehypeImgSize from 'rehype-img-size';
import { h } from 'hastscript';
import { visit } from 'unist-util-visit';
import remarkToc from 'remark-toc';
// import { highlightCode } from './src/lib/utils/highlighter.js';

const config: MdsvexOptions = defineConfig({
	extensions: ['.svelte.md', '.md', '.svx'],
	smartypants: {
		dashes: 'oldschool'
	}
	// Wait for skeleton to implement Prismjs, for now use <CodeBlock /> in .md files
	// highlight: {},
	// layout: {
	// 	blog: './src/lib/components/blog/_blog-layout.svelte',
	// 	project: './src/lib/components/projects/_project-layout.svelte',
	// 	_: './src/lib/components/fallback/_layout.svelte'
	// },
	// rehypePlugins: [
	// 	[rehypeWrap, { selector: 'table', wrapper: 'div.overflow-auto' }],
	// 	[rehypeImgSize, { dir: './static' }],
	// 	[slug],
	// 	[
	// 		headings,
	// 		{
	// 			behavior: 'prepend',
	// 			headingProperties: {},
	// 			content: '<i class="fa-regular fa-link"></i>'
	// 		}
	// 	]
	// ],
	// remarkPlugins: [
	// 	[remarkToc, { maxDepth: 3, tight: true }],
	// 	[remarkExternalLinks, { target: '_blank', rel: 'noreferrer' }],
	// 	remarkSetImagePath,
	// 	remarkLinkWithImageAsOnlyChild,
	// 	remarkHeadingsPermaLinks,
	// 	getHeadings
	// ]
});

export default config;