import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import "fontsource-roboto";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { client } from "./commons/graphql/client";
import { ApolloProvider } from "@apollo/client";
import { MuiPickersUtilsProvider } from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";
import zhLocale from "date-fns/locale/zh-CN";
import { createRouterComponent } from "@curi/react-dom";
import { createRouter, announce } from "@curi/router";
import { browser } from "@hickory/browser";
import routes from "./routes";

const router = createRouter(browser, routes, {
  sideEffects: [
    announce(({ response }) => {
      return `Navigated to ${response.location.pathname}`;
    }),
  ],
  external: { client }
});
const Router = createRouterComponent(router);

router.once(() => {
  ReactDOM.render(
    <React.StrictMode>
      <ApolloProvider client={client}>
        <MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhLocale}>
          <Router>
            <App />
          </Router>
        </MuiPickersUtilsProvider>
      </ApolloProvider>
    </React.StrictMode>,
    document.getElementById("root")
  );
});

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();