import createCache from "@emotion/cache";
import { CacheProvider, Global, ThemeProvider, css } from "@emotion/react";
import styled from "@emotion/styled";
import normalizeCss from "normalize.css/normalize.css?inline";
import React from "react";
import { IntlProvider } from "react-intl";

import themeConfig from "./config/theme";
import { quickTransition } from "./utils/transitions";
import Router from "./views/Router";

const themeCache = createCache({
  key: "cv",
});

const i = themeCache.insert;
themeCache.insert = (...args) => {
  args[2].tags.forEach((t) => {
    if (!t.getAttribute("media")) {
      t.setAttribute("media", "all");
    }
  });
  return i(...args);
};

const globalStyles = css`
  body {
    font-size: 16px;
    line-height: 1.5;
    font-family: "Noto Sans", sans-serif;
  }
`;

const Styles = styled("div")(({ theme }) => ({
  color: theme.palette.text.primary,

  "*": {
    boxSizing: "border-box",
  },
  a: {
    color: theme.palette.link.main,
    transition: `color 0.5s ${quickTransition}`,
  },
  "a:hover": {
    color: theme.palette.link.hover,
  },
}));

const App: React.FC = () => {
  return (
    <IntlProvider locale="en" defaultLocale="en">
      <CacheProvider value={themeCache}>
        <Global styles={normalizeCss} />
        <Global styles={globalStyles} />
        <ThemeProvider theme={themeConfig}>
          <Styles>
            <Router />
          </Styles>
        </ThemeProvider>
      </CacheProvider>
    </IntlProvider>
  );
};

export default App;