/* eslint-disable @next/next/no-sync-scripts */

import { Link } from '../models/common';
import { fetchMenus } from '../api/menus';
import { fetchPage } from '../api/page';
import { PageResponse } from '../models/page';
import { Footer as FooterI } from '../models/menu';
import React from 'react';
import { fetchBootstrapConfig } from '../api/bootstrapConfig';
import { BootstrapConfig } from '../models/bootstrapConfig';
import GenericPage from '../components/GenericPage';


export interface PageProps {
  errorCode: string;
  topMenu: Link[];
  bottomMenu: Link[];
  footer: FooterI;
  page: PageResponse;
  bootstrap: BootstrapConfig;
  referer: string;
  __lang: string;
}

export default function Page(props: PageProps) {
  const { page, topMenu, bottomMenu, footer, errorCode, referer, bootstrap } = props;

  return (
    <>
      <GenericPage
        errorCode={errorCode}
        topMenu={topMenu}
        bottomMenu={bottomMenu}
        footer={footer}
        page={page}
        bootstrap={bootstrap}
        referer={referer}
      />
    </>
  );
}

export async function getStaticProps(context: any) {
  console.log('getStaticProps capabilities', context);

  const pageId = context.locale === 'en' ? '/capabilities' : '/fahigkeiten';

  console.log('pageId', pageId);

  const menus = await fetchMenus(
    context.locale !== context.defaultLocale ? context.locale : ''
  );
  const bootstrap = await fetchBootstrapConfig(
    context.locale !== context.defaultLocale ? context.locale : ''
  );
  const __lang = context.locale;
  const page = await fetchPage(
    pageId,
    context.locale !== context.defaultLocale ? context.locale : ''
  );
  await new Promise((resolve) => {
    setTimeout(resolve, 1000);
  });

  return {
    props: {
      ...menus,
      ...page,
      bootstrap,
      __lang,
      referer: context?.req?.headers?.referer || null
    },
    revalidate: 60 * 5
  };
};