import React, { useState, useEffect } from "react";
import Routes from "./routes";
import "react-toastify/dist/ReactToastify.css";

import { createTheme, ThemeProvider } from "@material-ui/core/styles";
import { ptBR } from "@material-ui/core/locale";

import { TabTicketProvider } from "../src/context/TabTicketHeaderOption/TabTicketHeaderOption";

const App = () => {
  const [locale, setLocale] = useState();

  const theme = createTheme(
    {
      scrollbarStyles: {
        "&::-webkit-scrollbar": {
          width: "8px",
          height: "8px",
        },
        "&::-webkit-scrollbar-thumb": {
          boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",

          backgroundColor: "#e8e8e8",
        },
      },
      palette: {
        //primary: { main: "#2576d2" },
        primary: { main: "#ec5114" },
      },
    },
    locale
  );

  useEffect(() => {
    const i18nlocale = localStorage.getItem("i18nextLng");
    const browserLocale =
      i18nlocale.substring(0, 2) + i18nlocale.substring(3, 5);

    if (browserLocale === "ptBR") {
      setLocale(ptBR);
    }
  }, []);

  return (
    <ThemeProvider theme={theme}>

      {/*TabTicketProvider Context to manipulate the entire state of selected option from user click on tickets options header */}
      <TabTicketProvider>
        <Routes />
      </TabTicketProvider>


    </ThemeProvider>
  );
};

export default App;