import React from "react";

import { Link } from "../../../components/Link";
import { getEventYears, getEventTermsByYear } from "../../../lib/events";

import styles from "./year.module.css";

export async function getStaticPaths(): Promise<{
  paths: {
    params: {
      year: string;
    };
  }[];
  fallback: boolean;
}> {
  const years = await getEventYears();
  const paths = years.map((curYear) => ({
    params: { year: curYear },
  }));
  return {
    paths: paths,
    fallback: false,
  };
}

interface Context {
  params: {
    year: string;
  };
}

export async function getStaticProps(context: Context): Promise<{
  props: {
    year: string;
    terms: string[];
  };
}> {
  return {
    props: {
      year: context.params.year,
      terms: await getEventTermsByYear(context.params.year),
    },
  };
}

interface Props {
  year: string;
  terms: string[];
}

const Year = (props: Props) => {
  return (
    <div className={styles.main}>
      <h2 className={styles.heading2}>
        Events Archive:<span className={styles.blue}>{` ${props.year}`}</span>
      </h2>
      <hr />
      <div className={styles.links}>
        {props.terms.map((term) => (
          <Link key={term} href={`/events/${props.year}/${term}`}>
            {`${term.charAt(0).toUpperCase()}${term.slice(1)}`}
          </Link>
        ))}
      </div>
    </div>
  );
};

export default Year;