import React from 'react';
// import 'whatwg-fetch';
import App, { AppContext, AppInitialProps, AppProps as NextAppProps } from 'next/app';
import { ThemeProvider } from 'styled-components';
import NProgress from 'nprogress';

import NextI18NextInstance from '../i18n';
import { Router } from '../i18n';
import { isServer } from '../utils/deviceDetection';
import getSentryClient from '../utils/sentry';
import ErrorPage from './_error';
import { getSharedConfiguration } from '../prismic/api';
import { PrismicDocument } from 'easy-prismic-react';
import themes from '../styles/theme';
import { GlobalStyle } from '../styles/theme/theme';
import { initialize as initIntercom } from '../utils/intercom';
import { SharedConfiguration } from '../typings/entities';
import SEO from '../components/SEO';
import { getLanguageFromReq } from '../utils/i18n';
import { CookieConsent } from '../components/shared/CookieConsent';
import Footer from '../components/shared/Footer';

interface AppProps extends AppInitialProps, NextAppProps, Props {
}

interface Props {
  sharedConfiguration: PrismicDocument<SharedConfiguration>;
  isBlog: boolean;
  language: string;
  layoutProps?: unknown;
  error?: boolean;
}

Router.events.on('routeChangeStart', () => {
  NProgress.start();
});
Router.events.on('routeChangeComplete', () => {
  NProgress.done();
  window.scrollTo(0, 0);
});
Router.events.on('routeChangeError', () => {
  NProgress.done();
});

let sharedConfiguration: PrismicDocument<SharedConfiguration> = null;

class MyApp extends App<AppProps> {
  static async getInitialProps({ Component, ctx }: AppContext): Promise<any> {
    (getSentryClient() as any).init({ dsn: process.env.SENTRY_DSN });

    const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {};
    const layoutProps = (Component as any).layout && (Component as any).layout.getInitialProps ?
      await (Component as any).layout.getInitialProps(ctx) :
      {};

    try {
      if (isServer || null === sharedConfiguration) {
        sharedConfiguration = await getSharedConfiguration(ctx.req);
      }

      return {
        pageProps,
        layoutProps,
        sharedConfiguration,
        isBlog: ctx.asPath.search('/blog') !== -1,
        language: getLanguageFromReq(/* ctx.req */)
      };
    } catch (err) {
      return { pageProps, error: true };
    }
  }

  componentDidMount(): void {
    initIntercom();
  }

  get head(): React.ReactElement {
    const { language, sharedConfiguration, isBlog } = this.props;
    if (!sharedConfiguration) {
      return null;
    }

    const {
      name,
      description,
      theme_color,
      jsonld_name,
      jsonld_description,
      jsonld_foundingdate,
      jsonld_locality,
      jsonld_country,
      jsonld_same_as,
      og_title,
      og_description,
      og_image,
      blog_name,
      blog_description,
      blog_theme_color,
      blog_jsonld_name,
      blog_jsonld_description,
      blog_jsonld_foundingdate,
      blog_jsonld_locality,
      blog_jsonld_country,
      blog_jsonld_same_as,
      blog_og_title,
      blog_og_description,
      blog_og_image
    } = sharedConfiguration.data;
    const seoConfiguration = {
      name: isBlog ? blog_name : name,
      description: isBlog ? blog_description : description,
      theme_color: isBlog ? blog_theme_color : theme_color,
      jsonld_name: isBlog ? blog_jsonld_name : jsonld_name,
      jsonld_description: isBlog ? blog_jsonld_description : jsonld_description,
      jsonld_foundingdate: isBlog ? blog_jsonld_foundingdate : jsonld_foundingdate,
      jsonld_locality: isBlog ? blog_jsonld_locality : jsonld_locality,
      jsonld_country: isBlog ? blog_jsonld_country : jsonld_country,
      jsonld_same_as: isBlog ? blog_jsonld_same_as : jsonld_same_as,
      og_title: isBlog ? blog_og_title : og_title,
      og_description: isBlog ? blog_og_description : og_description,
      og_image: isBlog ? blog_og_image : og_image
    };

    return (
      <SEO
        seoConfiguration={seoConfiguration}
        language={language}
      />
    );
  }

  render(): React.ReactElement {
    const { Component, pageProps, layoutProps, sharedConfiguration, error } = this.props;
    let Layout: any = null;
    if ((Component as any).layout) {
      Layout = (Component as any).layout;
    }

    const header = {
      header_faq_link: sharedConfiguration.data.header_faq_link,
      header_account_link: sharedConfiguration.data.header_account_link,
      header_account_label: sharedConfiguration.data.header_account_label,
      header_matching_link: sharedConfiguration.data.header_matching_link,
      header_matching_label: sharedConfiguration.data.header_matching_label,
      first_product: sharedConfiguration.data.first_product,
      second_product: sharedConfiguration.data.second_product,
      third_product: sharedConfiguration.data.third_product,
      fourth_product: sharedConfiguration.data.fourth_product,
      fifth_product: sharedConfiguration.data.fifth_product,
      sixth_product: sharedConfiguration.data.sixth_product,
      first_post_tag: sharedConfiguration.data.first_post_tag,
      second_post_tag: sharedConfiguration.data.second_post_tag,
      third_post_tag: sharedConfiguration.data.third_post_tag,
      fourth_post_tag: sharedConfiguration.data.fourth_post_tag,
      header_blog_discover_link: sharedConfiguration.data.header_blog_discover_link,
      header_blog_discover_label: sharedConfiguration.data.header_blog_discover_label
    };
    const footer = {
      footer_legal_link: sharedConfiguration.data.footer_legal_link,
      footer_cgu_link: sharedConfiguration.data.footer_cgu_link,
      footer_privacy_link: sharedConfiguration.data.footer_privacy_link,
      footer_solutions: sharedConfiguration.data.footer_solutions,
      footer_about: sharedConfiguration.data.footer_about
    };
    return (
      <>
        {this.head}
        <ThemeProvider theme={themes}>
          <GlobalStyle />
          <div className={'main'}>
            {error ?
              <ErrorPage statusCode={500} /> :
              ((null !== Layout) ?
                <Layout{...layoutProps}>
                  <Component{...pageProps} header={header} />
                </Layout> :
                <Component {...pageProps} header={header} />)
            }
          <Footer {...footer} />
          </div>
          <CookieConsent privacyLink={footer.footer_privacy_link} />
        </ThemeProvider>
      </>
    );
  }
}

export default NextI18NextInstance.appWithTranslation(MyApp);