/* eslint-disable no-unused-vars */
import React, { useContext } from "react";
import axios from "axios";
import Header from "./HeaderFooter/Header.jsx";
import ProductOverview from "./ProductOverview/ProductOverview.jsx";
import RelatedProducts from "./RelatedProducts/RelatedProducts.jsx";
import CustomerOutfit from "./RelatedProducts/CustomerOutfit.jsx";
import QuestionsAndAnswers from "./QuestionsAndAnswers/QuestionsAndAnswers.jsx";
import RatingsAndReviews from "./RatingsAndReviews/RatingsAndReviews.jsx";
import Footer from "./HeaderFooter/Footer.jsx";
import Container from "@material-ui/core/Container";
import CircularProgress from "@mui/material/CircularProgress";
import Grid from "@material-ui/core/Grid";
import Divider from "@mui/material/Divider";
import { ProductsContext } from "./ProductsContext";
import { createTheme } from "@material-ui/core/styles";
import { ThemeProvider } from "@material-ui/core";
import "@fontsource/roboto/300.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";

const theme = createTheme({
  pallette: {
    primary: {
      main: "2FC3A8",
    },
    secondary: {
      main: "2FB1C3",
    },
  },
  typography: {
    fontFamily: "Roboto",
  },
});

export default function App() {
  const { isLoading } = useContext(ProductsContext);
  const [isLoadingState] = isLoading;

  if (isLoadingState) {
    return (
      <Container maxWidth="lg" className="loading">
        <Grid container justifyContent="center" alignItems="center">
          <CircularProgress />
        </Grid>
      </Container>
    );
  }



  return (
      <Container maxWidth="lg" className="App" >
        <ThemeProvider theme={theme}>

        <Grid container spacing={5}>
          <Grid item xs={12}>
            <Header />
          </Grid>
          <Grid item xs={12}>
            <ProductOverview />
          </Grid>
          <Grid item xs={12}>
            <Divider />
          </Grid>
          <Grid item xs={12}>
            <RelatedProducts />
          </Grid>
          <Grid item xs={12}>
            <CustomerOutfit />
          </Grid>
          <Grid item xs={12}>
            <RatingsAndReviews />
          </Grid>
          <Grid item xs={12}>
            <QuestionsAndAnswers />
          </Grid>
          <Grid item xs={12}>
            <Footer />
          </Grid>
        </Grid>

        </ThemeProvider>
      </Container>


  );
}