import { AppProps } from "next/app";
import Head from "next/head";
import React from "react";
import { LanguageProvider } from "../components/LanguageProvider";
import { Container, CssBaseline, ThemeProvider } from "@material-ui/core";
import theme from "../components/theme";
import { useStyles } from "../components/Layout";
import Header from "../components/Header";

function makeTitle(province) {
  if (!province) {
    return "Posso uscire di casa?";
  }
  return "Posso uscire da " + province.nome + "?";
}

function App({ Component, pageProps }: AppProps) {
  const classes = useStyles();
  const pageTitle = makeTitle(pageProps?.province);
  return (
    <>
      <Head>
        <meta charSet="utf-8" />
        <link rel="shortcut icon" href="/favicon.ico" />
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width"
        />
        <meta name="theme-color" content="#000000" />
        <meta
          name="description"
          content="Informazioni sulle restrizioni COVID. Inserisci la tua provincia per sapere facilmente le restrizioni vigenti."
        />
        <meta property="og:url" content="https://possouscire.casa/" />
        <meta property="og:image" content="/italyIcon.png" />
        <meta property="og:title" content="Posso Uscire?" />
        <meta
          property="og:description"
          content="Informazioni sulle restrizioni COVID. Inserisci la tua provincia per sapere facilmente le restrizioni vigenti."
        />

        <link rel="manifest" href="/manifest.json" />

        <title>{pageTitle}</title>
        <link
          rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
        />
      </Head>
      <main>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <LanguageProvider>
            <Container maxWidth="sm" className={classes.container}>
              <Header province={pageProps.province} />
              <Component {...pageProps} />
            </Container>
          </LanguageProvider>
        </ThemeProvider>
      </main>
    </>
  );
}

export default App;