const serverPath = require("./serverPath.js")
const blogs = require(serverPath+"/blog/blogs.js");
const filePath = serverPath+"/blog/blogs/";
const fs = require("fs");
const { pageTop, pageBottom } = require(serverPath+"/html.js")
const comments = require(serverPath+"/blog/comments.js")

console.log(blogs);
/////////////////////////////////
// Make each individual blog page
/////////////////////////////////
for (let length = 0; length < blogs.length; length++) {
  console.log(length)
  const blogFilePath = filePath + length + ".html";
  

  let content = `${pageTop}<div id="main">
                <h3 class="blog-date">${blogs[length][2]}</h3>
                <h1 class="blog-title">${blogs[length][0]}</h1>
                <p class="blog-content">${blogs[length][1]}</p>
                ${blogs[length][3] ? 
                  `<div class="blog-images">
                    ${blogs[length][3].map(image => `<img class="blog-image" height="200" src="/images/${image}" alt="${image}" />`).join('')}
                  </div>` 
                  : ''}<br/>
				 <sub><i><small>${blogs[length][4]}</small></i></sub><hr/>
				 <h3>Comments section:</h3><br/>
				 <form action="/blog/submit-comment" id="commentForm" method="post">
						<input name="name" class="form-control" id="name" placeholder="Enter your name"><br/>
						<input height="40px" name="comment" class="form-control input-comment" id="comment" placeholder="Enter your Comment...">
                                                <input type="hidden" name="pageID" value="${length}">
						<button type="submit">Submit</button>
				</form>

				  <div class="${length}" id="comments">`


    for (let comment = 0; comment<comments[length].length; comment++) {
	content+=`<b>${comments[length][comment][0]}</b>: <i>${comments[length][comment][1]}</i><br/>`
    }
				        
				      
  content+=`</div></div>` 


  if (length > 0) { // Generate link to previous blog
      content+=`<p class="previous"><a href="${length-1}.html"><-- Previous</a></p>`
  }
  if (length != blogs.length - 1) { // Generate link to next blog
      content+=`<p class="next"><a href="${length+1}.html">Next --></a></p>`
  }
                
  content += `
                <div id="links">
                </div><script src="/blog/comments.js"></script><script src="/blog/displayComments.js"></script>${pageBottom}` 


  fs.writeFile(blogFilePath, content, (err) => {
    if (err) {
      console.error('Error creating file:', err);
    } else {
      console.log('File created successfully:', blogFilePath);
    }
  });

///////////////////////
// Make latest blog
//////////////////////
latestBlogPath = filePath + "latest.html"
console.log(latestBlogPath)
lastitem = blogs.length - 1
let latestcontent = `${pageTop}
               <h3 class="blog-date">${blogs[lastitem][2]}</h3>
               <h1 class="blog-title">${blogs[lastitem][0]}</h1>
                <p class="blog-content">${blogs[lastitem][1]}</p>
                ${blogs[lastitem][3] ?
                  `<div class="blog-images">
                    ${blogs[lastitem][3].map(image => `<img class="blog-image" height="200" src="/images/${image}" alt="${image}" />`).join('')}
                  </div>`
                  : ''}<br/>
                <sub><i><small>${blogs[lastitem][4]}</small></i></sub>
                <p class="previous"><a href="${lastitem-1}.html"><-- Previous</a></p>
                <div id="links">
                </div><script src="https://code.jquery.com/jquery-3.6.1.min.js"></script><script src="/template.js"></script>${pageBottom}`

fs.writeFile(latestBlogPath, latestcontent, (err) => {
    if (err) {
      console.error('Error creating file:', err);
    } else {
      console.log('File created successfully:', latestBlogPath);
    }
  });



///////////////////////
// Make entire blog
//////////////////////
function entireBlogPost() {
	let htmlPage = pageTop;

  // Add each blog post to the HTML page
  for (let length = blogs.length - 1; length >= 0; length--) {
    const title = blogs[length][0];
    const content = blogs[length][1];
    const date = blogs[length][2];

    htmlPage += `
            <h3 class="blog-date">${date}</h3>
            <h1 class="blog-title">${title}</h1>
            <p class="blog-content">${content}</p>
            ${blogs[length][3] ? 
                  `<div class="blog-images">
                    ${blogs[length][3].map(image => `<img class="blog-image" height="200" src="/images/${image}" alt="${image}" />`).join('')}
                  </div>` 
                  : ''}

            <div id="links"></div><hr/><script src="/template.js"></script>`;
  }

  //Remove the last <hr/>
  htmlPage = htmlPage.slice(0, -5)
  // Close the HTML page
  htmlPage += pageBottom;

  return htmlPage;
}

entireBlog = entireBlogPost()
entireFeedPath = filePath + "all.html"

fs.writeFile(entireFeedPath, entireBlog, (err) => {
	if (err) {
		console.error('Error writing to the file:', err);
	} else {
	console.log('Data has been written to the file successfully.');
        }
});

}