<script context="module">
	if (typeof String.prototype.replaceAll === 'undefined') {
		String.prototype.replaceAll = function (match, replace) {
			return this.replace(new RegExp(match, 'g'), replace);
		};
	}

	export async function load({ params }) {
		const content = await import(`../../../data/${params.slug}.js`);
		let paragraphs = [];
		let str = getTokenedString(content['default']);
		for (const paragraph of getParagraphs(str)) {
			let lines = paragraph
				.split('\n')
				.map((line) => getTokenedLine(line))
				.join('\n');
			paragraphs.push(lines);
		}
		return { props: { paragraphs } };
	}

	function getParagraphs(str) {
		let paragraphArray = [];
		let paragraph = '';
		const splits = str.split('\n');
		splits.map((line) => {
			if (line.trim() === '') {
				paragraphArray.push(paragraph);
				paragraph = '';
			} else {
				paragraph += paragraph === '' ? '' : '\n';
				paragraph += line.trim();
			}
		});
		paragraphArray.push(paragraph);
		return paragraphArray;
	}

	function getTokenedString(str) {
		return str.replaceAll(/\[[A-Za-z#]*\]/g, '<span class="token">$&</span>');
	}

	function getTokenedLine(line) {
		return '<span class="line">' + line.trim() + '</span>';
	}
</script>

<script>
	import SongMeta from '$lib/song/SongMeta.svelte';
	import SongContent from '$lib/song/SongContent.svelte';
	import meta from '../../../data/_songs-meta_';
	import { page } from '$app/stores';

	export const { songs } = meta;
	export let song = songs.find((item) => item.slug === $page.params.slug);
	export let paragraphs;
</script>

<div class="content">
	<h1>{song.title} {song.instrument} Cover</h1>
	<div class="songs-content">
		<SongMeta {song} />
		<SongContent {paragraphs} />
	</div>
</div>