/*
 * Copyright (C) 2019 Positive Zero SA de CV - Todos Los Derechos Reservados
 * La copia o distribución no autorizada de este archivo por cualquier medio está estrictamente prohibida
 *
 * Copyright (C) 2019 Positive Zero SA de CV - All Rights Reserved
 * Unauthorized copying or distribution of this file, via any medium is strictly prohibited
 */
import NProgress from 'nprogress';
import Router from 'next/router';
import Head from './Head';
import { FunctionComponent, ReactNode } from 'react';
import NavBar from 'components/NavBar';
import Footer from 'components/Footer';
import Link from 'next/link';
import MX from '../../public/icons/mx.svg';
import USA from '../../public/icons/usa.svg';

Router.events.on('routeChangeStart', () => NProgress.start());
Router.events.on('routeChangeComplete', () => NProgress.done());
Router.events.on('routeChangeError', () => NProgress.done());

interface LayoutProps {
  children?: ReactNode;
  pageTitle: string;
  currentRoute: string;
  metaDescription: string;
  navBarColor?: string;
}

const Layout: FunctionComponent<LayoutProps> = ({
  children,
  pageTitle,
  metaDescription,
  currentRoute,
  navBarColor
}) => {
  console.log(currentRoute);
  return (
    <div>
      <div className='flex space-x-4 fixed bottom-5 left-5 z-20'>
        <Link href={`es${currentRoute}`}>
          <MX width='35' height='35' />
        </Link>
        <div className='border-r border-gray-400' />
        <Link href={`en${currentRoute}`}>
          <USA width='35' height='35' />
        </Link>
      </div>
      <Head pageTitle={pageTitle} description={metaDescription} />
      <NavBar currentRoute={currentRoute} backgroundColor={navBarColor} />
      <main>{children}</main>
      {currentRoute !== '/' && <Footer backgroundColor={navBarColor} currentRoute={currentRoute} />}
    </div>
  );
};

export default Layout;
