const glob = require('glob');
const fs = require('fs');
const path = require('path');
const marked = require('marked');
const renderer = new marked.Renderer();
const camelCase = require('camel-case');
const titleCase = require('title-case');
const shell = require('shelljs');
const getFileNameFromPath = require('@lukeboyle/get-filename-from-path');

renderer.heading = function(code, level) {
	if (level === 1) {
		return `
			<header>
				<h1 className="blog-post--title">${code}</h1>
			</header>
		`;
	} else {
		return `<h${level}>${code}</h${level}>`;
	}
};

renderer.code = function(code, language) {
	return `<pre><code>
		${code.split('\n').map(codeBlock => {
		const codeWithEscapedQuotes = codeBlock.split('"').join('\\"');
		const codeWithEscapedHashes = codeWithEscapedQuotes.split('#').join('\\#');
		return `<span>{"${codeWithEscapedHashes}"}</span>`;
	}).join('')}
	</code></pre>`;
};

renderer.image = function(href, title, text) {
	return `<img src="${href}" alt="${text}"/>`;
};

function getMarkupFromMarkdown(markdownString) {
	return `<article className="blog-post">${marked(markdownString, {renderer: renderer, gfm: true})}</article>`;
}

function generateComponent(post) {
	const fileName = getFileNameFromPath(post.path);
	const camelCaseName = camelCase(fileName);

	return {
		path: post.path,
		fileName,
		componentName: camelCaseName[0].toUpperCase() + camelCaseName.slice(1),
		component: `
			import React from 'react';
			import Helmet from 'react-helmet';
				
			export default class ${camelCaseName} extends React.Component {
				componentDidMount() {
					const heading = this.rootNode.querySelector('h1');
					
					heading.innerHTML = '<a href="/${post.path.replace('.md', '')}">' + heading.innerText + '</a>';
				}
				
				render() {
					return (
						<div 
							className={this.props.isBlogPage ? "" : "max-width-container blog"}
							ref={el => this.rootNode = el}
						>
							<Helmet>
								<title>${titleCase(fileName)} | Luke Boyle</title>
							</Helmet>
							${getMarkupFromMarkdown(post.contents)}
						</div>
					);
				}
			}
		`
	};
}

(() => {
	glob('blog-posts/**/*.md', {}, (err, files) => {
		const blogPosts = files.reduce((acc, curr) => {
			acc.push({
				path: curr,
				contents: fs.readFileSync(curr, {encoding: 'utf-8'})
			});

			return acc;
		}, []);

		const components = blogPosts.map(generateComponent);

		shell.rm('-rf', path.resolve(`${__dirname}/../src/pages/blog-posts`));

		components.forEach(component => {
			shell.mkdir('-p', path.resolve(`${__dirname}/../src/pages/${component.path.replace(`/${component.fileName}.md`, '')}`));
			fs.writeFileSync(path.resolve(`${__dirname}/../src/pages/${component.path.replace('.md', '.jsx')}`), component.component);
		});

		const reversedComponents = components.reverse();

		const blogPage = `
			import React from 'react';
			import Helmet from 'react-helmet';
			${reversedComponents.reduce((acc, curr) => {
				return acc + `import ${curr.componentName} from './${curr.path.replace('.md', '.jsx')}';\n`;
			}, '')}
				
			export default class Blog extends React.Component {
				render() {
					return (
						<div className="max-width-container blog">
							<Helmet>
								<title>Blog | Luke Boyle</title>
							</Helmet>
							${reversedComponents.reduce((acc, curr) => {
								return acc + `<${curr.componentName} isBlogPage={true}/>\n`;	
							}, '')}
						</div>
					);
				}
			}
		`;

		fs.writeFileSync(path.resolve(`${__dirname}/../src/pages/blog.jsx`), blogPage);
	});
})();
@@ -3152,47 +3152,10 @@
 %3Cdiv
- className=%22max-width-container blog%22
 %3E%0A
+
 %09%09%09%09
@@ -3216,32 +3216,314 @@
 %09%09%09%09%09%09%3C/Helmet%3E%0A
+%09%09%09%09%09%09%09%3Cdiv className=%22blog-header%22%3E%0A%09%09%09%09%09%09%09%09%3Ch1 className=%22blog-header--site-name%22%3E%0A%09%09%09%09%09%09%09%09%09Boyleing Point%0A%09%09%09%09%09%09%09%09%3C/h1%3E%0A%09%09%09%09%09%09%09%09%3Cp className=%22blog-header--description%22%3E%0A%09%09%09%09%09%09%09%09%097/11 was an inside job%0A%09%09%09%09%09%09%09%09%3C/p%3E%0A%09%09%09%09%09%09%09%3C/div%3E%0A%09%09%09%09%09%09%09%3Cdiv className=%22max-width-container blog%22%3E%0A%09
 %09%09%09%09%09%09%09$%7Breverse
@@ -3554,24 +3554,25 @@
  curr) =%3E %7B%0A
+%09
 %09%09%09%09%09%09%09%09retu
@@ -3627,18 +3627,18 @@
 e%7D/%3E%5Cn%60;
-%09
 %0A
+%09
 %09%09%09%09%09%09%09%7D
@@ -3640,24 +3640,38 @@
 %09%09%09%09%7D, '')%7D%0A
+%09%09%09%09%09%09%09%3C/div%3E%0A
 %09%09%09%09%09%09%3C/div%3E

add blog header