import "../styles/globals.scss";

//import type { AppProps } from "next/app";

import { QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";
import { Hydrate } from "react-query/hydration";
import { useState } from "react";
import { useRef } from "react";
import Alert from "../components/Alert.jsx";
import alertContext, { AlertProvider } from "../context/alert.context.js";
import Notifications from "../components/Notifications.jsx";
import { WebsocketProvider } from "../context/websocket.context.js";
import { SessionProvider } from "../context/session.context.js";

String.prototype.capitalize = function () {
  return this.charAt(0).toUpperCase() + this.slice(1);
};

String.prototype.sansAccent = function () {
  var accent = [
    /[\300-\306]/g,
    /[\340-\346]/g, // A, a
    /[\310-\313]/g,
    /[\350-\353]/g, // E, e
    /[\314-\317]/g,
    /[\354-\357]/g, // I, i
    /[\322-\330]/g,
    /[\362-\370]/g, // O, o
    /[\331-\334]/g,
    /[\371-\374]/g, // U, u
    /[\321]/g,
    /[\361]/g, // N, n
    /[\307]/g,
    /[\347]/g, // C, c
  ];
  var noaccent = [
    "A",
    "a",
    "E",
    "e",
    "I",
    "i",
    "O",
    "o",
    "U",
    "u",
    "N",
    "n",
    "C",
    "c",
  ];

  var str = this;
  for (var i = 0; i < accent.length; i++) {
    str = str.replace(accent[i], noaccent[i]);
  }

  return str;
};

function MyApp({ Component, pageProps }) {
  //const [queryClient] = useState(() => new QueryClient());
  const queryClientRef = useRef();
  if (!queryClientRef.current) {
    queryClientRef.current = new QueryClient();
  }
  const [alert, setAlert] = useState({
    active: false,
    message: "",
    title: "",
    type: "",
    validate: () => {},
  });
  return (
    <SessionProvider>
    <AlertProvider setAlert={setAlert}>
      <QueryClientProvider client={queryClientRef.current}>
        <WebsocketProvider>
          <Component {...pageProps} />
          <Alert
            alert={alert}
            onClose={() => {
              setAlert({ ...alert, active: false });
              setTimeout(() => {
                setAlert({ active: false, message: "", title: "", type: "" });
              }, 400);
            }}
          />
          <Notifications />
        </WebsocketProvider>
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
      </AlertProvider>
    </SessionProvider>
  );
}

export default MyApp;