import "./App.css";
import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import firebase from "firebase/compat/app";
import "firebase/compat/database";
import "firebase/compat/analytics";
import { Proiezione } from "./Proiezione";
import { MyForm } from "./MyForm";
import { Admin } from "./Admin";
import { Galleria } from "./Galleria";
import { Container, Stack, Typography } from "@mui/material";
import logoSrc from "./logo_chat.svg";

const firebaseConfig = {
  apiKey: "AIzaSyBWE1l8WV_7eyKT-PMu0Kq2w_WiV0SUhJw",
  authDomain: "messaggiswing.firebaseapp.com",
  projectId: "messaggiswing",
  storageBucket: "messaggiswing.appspot.com",
  messagingSenderId: "983131964310",
  appId: "1:983131964310:web:5ef430e42c42d2dfe253b7",
  measurementId: "G-1CBJZ3B48E",
  databaseURL:
    "https://messaggiswing-default-rtdb.europe-west1.firebasedatabase.app",
};

firebase.initializeApp(firebaseConfig);
firebase.analytics();

const ListaEventi = () => {
  const [eventi, cambiaEventi] = useState([]);

  useEffect(() => {
    var messagesRef = firebase.database().ref(`/eventi`);

    messagesRef.once("value", function (snapshot) {
      const eventiObject = snapshot.val();
      const e = Object.keys(eventiObject).map((d, i) => {
        const color = `hsl(${i * 10}, 75%, 70%`;
        return (
          <div key={d}>
            <a
              style={{
                textDecoration: "none",
                display: "inline-block",
                color,
                fontFamily: "Lineatura",
                borderBottom: `1px solid ${color}`,
              }}
              href={`/eventi/${d}`}
            >
              {eventiObject[d]}
            </a>
          </div>
        );
      });
      cambiaEventi(e);
    });
  }, []);

  if (!eventi) return <div></div>;
  return (
    <Container maxWidth="md">
      <img
        alt="logo"
        src={logoSrc}
        style={{
          width: 120,
          position: "absolute",
          top: 20,
          right: 20,
        }}
      />
      <Stack
        spacing={2}
        sx={{
          paddingTop: 20,
        }}
      >
        <Typography
          variant="h4"
          style={{
            fontFamily: "Lineatura",
          }}
        >
          I nostri eventi
        </Typography>

        {eventi}
      </Stack>
    </Container>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(
  <Router>
    <Routes>
      <Route path="/" element={<ListaEventi />} />
      <Route path="/:evento" element={<MyForm />} />
      <Route path="/eventi/:evento" element={<Galleria />} />
      <Route path="proiezione/:evento" element={<Proiezione />} />
      <Route path="admin/:evento" element={<Admin />} />
    </Routes>
  </Router>
);