import React from "react";
import Head from "next/head";
import { AppProps } from "next/app";
import styled, { createGlobalStyle } from "styled-components";
import { ToastContainer } from "react-toastify";
import colors from "@theme/colors";
import breakpoints from "@theme/breakpoints";
import LocaleStore from "../i18n";

import "react-mde/lib/styles/css/react-mde-all.css";
import "react-toastify/dist/ReactToastify.css";
import "normalize.css";

const fontFamily = "'Montserrat', sans-serif";
const fontSize = 12; // 16px
const lineHeight = 1.5;

const GlobalCommonStyles = createGlobalStyle`
* {
  box-sizing: border-box;
}

html {
  font-family: ${fontFamily};

  /* 10px */
  font-size: ${fontSize * (2 / 3)}pt;
  line-height: ${lineHeight};

  @media screen and (min-width: ${breakpoints.medium}) {
    /* 16px */
    font-size: ${fontSize}pt;
  }

  @media screen and (min-width: ${breakpoints.large}) {
    /* 20px */
    font-size: ${fontSize * 1.25}pt;
  }

  @media screen and (min-width: ${breakpoints.xlarge}) {
    /* 24px */
    font-size: ${fontSize * 1.5}pt;
  }
}

body {
  padding: 0;
  background-color: ${colors.darkBlue};
}

p {
  font-size: 1.2rem;
  font-weight: 300;
  word-break: break-word;
  hyphens: auto;
}

h1 {
  line-height: 1.15;
  font-size: 2.5rem;
  font-weight: 200;
  margin-block-start: 0;
  margin-block-end: 0;
}

h2 {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-block-start: 0;
  margin-block-end: 0;
  text-transform: uppercase;
}

h3 {
  font-size: 2rem;
  font-weight: 200;
  margin-block-start: 0;
  margin-block-end: 0;
}

h4 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-block-start: 0;
  margin-block-end: 0;
  text-transform: uppercase;
}

h5 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-block-start: 0;
  margin-block-end: 0;
}

h6 {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  font-weight: 800;
  margin-block-start: 0;
  margin-block-end: 0;
  text-transform: uppercase;
}

li {
  font-weight: 600;
}

a {
  text-decoration: underline;
  color: ${colors.blue1};
}

a:hover {
  text-decoration: none;
}
`;

const AppContainer = styled.div`
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-flow: column nowrap;
  color: ${colors.black};
  background-color: ${colors.white};
`;

const Web20App = ({ Component, pageProps }: AppProps): JSX.Element => (
  <>
    <Head>
      <meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
      <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <title>Aalto-yliopiston Sähköinsinöörikilta ry</title>
      <meta
        name="description"
        content="Aalto-yliopiston Sähköinsinöörikilta ry on Otaniemessä vaikuttava opiskelijajärjestö, joka on perustettu vuonna 1921. Kilta järjestää kaikenlaista toimintaa liittyen opintoihin ja vapaa-ajan viettoon."
      />
      <meta name="keywords" content="SIK AYY" />
    </Head>
    <GlobalCommonStyles />
    <LocaleStore>
      <AppContainer>
        <Component {...pageProps} />
      </AppContainer>
    </LocaleStore>
    <ToastContainer position="bottom-right" />
  </>
);

export default Web20App;
