/* 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 { PageResponse } from '../../models/page';
import { Footer as FooterI } from '../../models/menu';
import React from 'react';
import Error from '../Error';

import { BootstrapConfig } from '../../models/bootstrapConfig';
import dynamic from 'next/dynamic';

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

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

export default function GenericPage(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 (
    <>
      <ThemeWrapper className="wrapper">
        <>
          <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} />}
            {meta?.keywords && (
              <meta name="keywords" content={meta?.keywords} />
            )}
            {meta?.image?.src && (
              <meta
                property="og:image"
                content={meta?.image?.src
                  .replace('thumbs', 'media')
                  .replace('_1200x630', '')}
              />
            )}
            {meta?.image?.alt && (
              <meta property="og:image:alt" content={meta?.image?.alt} />
            )}
            <meta
              property="og:url"
              content={(process.browser && window.location.href) || ''}
            />
            {meta?.image?.alt && (
              <meta name="twitter:card" content={meta?.image?.alt} />
            )}
            <meta
              property="og:description"
              content={meta?.description || errorCode}
            />
            <meta property="og:site_name" content="EAE" />
            <meta property="og:type" content="website" />
            {meta?.image?.alt && (
              <meta name="twitter:image:alt" content={meta?.image?.alt} />
            )}
          </Head>
          <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>
    </>
  );
}
