---
import type * as shiki from 'shiki';
import { renderToHtml } from 'shiki';
import { getHighlighter } from './Shiki.js';

interface Props {
	/** The code to highlight. Required. */
	code: string;
	/**
	 * The language of your code.
	 * Supports all languages listed here: https://github.com/shikijs/shiki/blob/main/docs/languages.md#all-languages
	 * Instructions for loading a custom language: https://github.com/shikijs/shiki/blob/main/docs/languages.md#supporting-your-own-languages-with-shiki
	 *
	 * @default "plaintext"
	 */
	lang?: shiki.Lang | shiki.ILanguageRegistration;
	/**
	 * The styling theme.
	 * Supports all themes listed here: https://github.com/shikijs/shiki/blob/main/docs/themes.md#all-themes
	 * Instructions for loading a custom theme: https://github.com/shikijs/shiki/blob/main/docs/themes.md#loading-theme
	 *
	 * @default "github-dark"
	 */
	theme?: shiki.IThemeRegistration;
	/**
	 * Enable word wrapping.
	 *  - true: enabled.
	 *  - false: disabled.
	 *  - null: All overflow styling removed. Code will overflow the element by default.
	 *
	 * @default false
	 */
	wrap?: boolean | null;
	/**
	 * Generate inline code element only, without the pre element wrapper.
	 *
	 * @default false
	 */
	inline?: boolean;
}

const {
	code,
	lang = 'plaintext',
	theme = 'github-dark',
	wrap = false,
	inline = false,
} = Astro.props;

// 1. Get the shiki syntax highlighter
const highlighter = await getHighlighter({
	theme,
	// Load custom lang if passed an object, otherwise load the default
	langs: typeof lang !== 'string' ? [lang] : undefined,
});

// 2. Turn code into shiki theme tokens
const tokens = highlighter.codeToThemedTokens(code, typeof lang === 'string' ? lang : lang.id);

// 3. Get shiki theme object
const _theme = highlighter.getTheme();

// 4. Render the theme tokens as html
const html = renderToHtml(tokens, {
	themeName: _theme.name,
	fg: _theme.fg,
	bg: _theme.bg,
	elements: {
		pre({ className, style, children }) {
			// Swap to `code` tag if inline
			const tag = inline ? 'code' : 'pre';
			// Replace "shiki" class naming with "astro-code"
			className = className.replace(/shiki/g, 'astro-code');
			// Handle code wrapping
			// if wrap=null, do nothing.
			if (wrap === false) {
				style += '; overflow-x: auto;"';
			} else if (wrap === true) {
				style += '; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;"';
			}
			return `<${tag} class="${className}" style="${style}" tabindex="0">${children}</${tag}>`;
		},
		code({ children }) {
			return inline ? children : `<code>${children}</code>`;
		},
	},
});
---

<Fragment set:html={html} />