import HomePage from "../../components/home-page";
import ICard from "../../components/introduction-card";
import WCard from "../../components/werefox-card";
import PBlock from "../../components/page-block";

// Grab data from a static YAML file
export async function getStaticProps() {
  const fs = require("fs");
  const yaml = require("js-yaml");
  let INTRODUCTION = {};
  let SUBDOMAINS = {};
  let OTHER = {};

  try {
    let fileContent = fs.readFileSync("./data/homepage/introduction.yml", "utf8");
    INTRODUCTION = yaml.load(fileContent);
    fileContent = fs.readFileSync("./data/homepage/subdomains.yml", "utf8");
    SUBDOMAINS = yaml.load(fileContent);
    fileContent = fs.readFileSync("./data/homepage/other.yml", "utf8");
    OTHER = yaml.load(fileContent);
  } catch (e) {
    console.log(e);
  }
  return {
    props: {
      INTRODUCTION,
      SUBDOMAINS,
      OTHER,
    },
  };
}

export default function Home({ INTRODUCTION, SUBDOMAINS, OTHER }) {
  // let introarray = INTRODUCTION["intro"].split("\n");
  // introarray = introarray.slice(0, introarray.length - 1);
  // const introdict = Object.assign({}, introarray);

  return (
    <HomePage page_title="Werefox Homepage" card_title="Werefox Homepage">
      <WCard title="Welcome to werefox.cafe">
        <ICard introduction={INTRODUCTION.intro} emoji_paths={{}} />
      </WCard>
      <WCard title="Subdomains">
        <PBlock pages={SUBDOMAINS} />
      </WCard>
      <WCard title="Other Useful Sites">
        <PBlock pages={OTHER} />
      </WCard>
    </HomePage>
  );
}