/* eslint-disable @next/next/no-sync-scripts */
import { GetServerSideProps } from 'next';
import Head from 'next/head';
import Header from '../../components/Header';
import CareerDetail, {
  Props as CareerDetailProps,
} from '../../components/CareerDetail';
import Footer from '../../components/Footer';
import ThemeWrapper from '../../components/ThemeWrapper';

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 Error from '../Error';
import { fetchBootstrapConfig } from '../../api/bootstrapConfig';
import { BootstrapConfig } from '../../models/bootstrapConfig';
import dynamic from 'next/dynamic';
import { freshDataInCache, getNewDataToCache } from '../../config';

const Blocks = dynamic(() => import('../Blocks'));

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 } = props;
  const meta = page?.meta;
  const details = page?.details;
  const carrerDetailProps = details
    ? {
        details: page.details,
        linkDescription: page.linkDescription,
        link: page.link,
        specs: page.specs,
        title: page.title,
        url: page.url,
        languages: page.languages,
      }
    : null;

  return (
    <>
      <Head>
        <title>{`${page?.title || errorCode} - EAE`}</title>
        <meta
          name="description"
          content={meta?.description || errorCode || 'EAE'}
        />
        <link rel="icon" href="/favicon.ico" />
        <link rel="manifest" href="/manifest.webmanifest" />

        <meta name="apple-mobile-web-app-title" content="EAE" />
        <meta name="application-name" content="EAE" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="default" />

        <link rel="apple-touch-startup-image" href="/logo-eae-196.png" />
        <link rel="apple-touch-icon" href="/logo-eae-196.png" />
        <link
          rel="apple-touch-icon-precomposed"
          sizes="128x128"
          href="/logo-eae-128.png"
        />

        <meta name="mobile-web-app-capable" content="yes" />
        <link rel="shortcut icon" sizes="196x196" href="/logo-eae-196.png" />
        <link rel="shortcut icon" sizes="128x128" href="/logo-eae-128.png" />
        <meta name="theme-color" content="default" />
        {meta?.title && (
          <meta property="og:title" content={meta?.title} key="title" />
        )}
        {meta?.keywords && (
          <meta name="keywords" content={meta?.keywords} key="keywords" />
        )}
        {meta?.image?.src && (
          <meta
            property="og:image"
            content={meta?.image?.src
              .replace('thumbs', 'media')
              .replace('_1200x630', '')}
            key="image"
          />
        )}
        {meta?.image?.alt && (
          <meta
            property="og:image:alt"
            content={meta?.image?.alt}
            key="image_alt"
          />
        )}
        <meta
          property="og:url"
          content={(process.browser && window.location.href) || ''}
          key="url"
        />
        {meta?.image?.alt && (
          <meta
            name="twitter:card"
            content={meta?.image?.alt}
            key="twitercard"
          />
        )}
        <meta
          property="og:description"
          content={meta?.description || errorCode}
          key="description"
        />
        <meta property="og:site_name" content="EAE" key="site_name" />
        <meta property="og:type" content="website" key="website" />
        {meta?.image?.alt && (
          <meta
            name="twitter:image:alt"
            content={meta?.image?.alt}
            key="twitter_image_alt"
          />
        )}
      </Head>
      <ThemeWrapper className="wrapper">
        <>
          <Header image={{ src: '/imgs/logo_eae.svg' }} links={topMenu} />
          <div className="wrapper__content">
            {errorCode ? <Error /> : false}

            {carrerDetailProps && (
              <CareerDetail {...(carrerDetailProps as CareerDetailProps)} />
            )}

            {page?.content && (
              <div
                dangerouslySetInnerHTML={{ __html: page.content }}
                className="content"
              />
            )}

            <Blocks page={page} />
          </div>
          <Footer
            img={{ src: '/imgs/logo_blue.svg' }}
            menus={bottomMenu}
            {...footer}
          />
        </>
      </ThemeWrapper>
    </>
  );
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  const params = Object.entries(context?.params || [])
    .map(([key, values]) => {
      let str = `?${key}=`;
      const strValues = values?.toString() || '';
      return str + strValues.replace(',', `&${key}=`);
    })
    .toString();
  let pId = context.resolvedUrl.replace(params, '');
  if (pId.endsWith(`-${context.locale}`)) pId.substring(0, pId?.length - 4);
  const pageId =
    context.resolvedUrl === '/' || context.resolvedUrl === '/index.php'
      ? `/home${
          context.locale !== context.defaultLocale ? `-${context.locale}` : ''
        }`
      : pId;

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

  const headerString: string = `public, s-maxage=${
    freshDataInCache ? freshDataInCache : 10
  }, stale-while-revalidate=${getNewDataToCache ? getNewDataToCache : 59}`;

  context.res.setHeader('Cache-Control', headerString);

  return {
    props: {
      ...menus,
      ...page,
      bootstrap,
      referer: context.req.headers.referer || null,
    },
  };
};
