import Head from 'next/head';
import { read, utils } from 'xlsx';
import base64 from "@/sheetjs.xlsx";

export default function Index({type, html, name}) { return ( <>
  <Head>
    <meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>{`SheetJS Next.JS ${type} Demo`}</title>
  </Head>
  <h3>{`SheetJS Next.JS ${type} Demo`}</h3>
  <p>
    This demo reads from <code>/sheetjs.xlsx</code><br/><br/>
    Sheet name: <b>{name}</b><br/>
  </p>
  <div dangerouslySetInnerHTML={{ __html: html }} />
</> ); }

let cache = [];

export async function getStaticProps(ctx) {
  if(!cache || !cache.length) {
    const wb = read(base64, {type: "base64"});
    cache = wb.SheetNames.map((name) => ({ name, sheet: wb.Sheets[name] }));
  }
  const entry = cache[ctx.params.id];
  return {
    props: {
      type: "getStaticPaths",
      name: entry.name,
      id: ctx.params.id.toString(),
      html: entry.sheet ? utils.sheet_to_html(entry.sheet) : "",
    },
  }
}

export async function getStaticPaths() {
  const wb = read(base64, {type: "base64"});
  cache = wb.SheetNames.map((name) => ({ name, sheet: wb.Sheets[name] }));
  return {
    paths: wb.SheetNames.map((_, idx) => ({ params: { id: idx.toString()  } })),
    fallback: false,
  };
}