import DeleteIcon from "@mui/icons-material/Delete";
import "./App.css";
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import firebase from "firebase/app";
import "firebase/database";

import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemText from "@mui/material/ListItemText";
import Checkbox from "@mui/material/Checkbox";
import { Proiezione } from "./Proiezione";
import { MyForm } from "./MyForm";
import { Admin } from "./Admin";

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

firebase.initializeApp(firebaseConfig);

export function CheckboxListSecondary({ messaggi, onChecked }) {
  return (
    <List
      dense
      sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}
    >
      {messaggi.map((m) => {
        const labelId = `checkbox-list-secondary-label-${m.timestamp}`;
        return (
          <ListItem
            key={m.timestamp}
            primaryAction={
              <Button variant="outlined" startIcon={<DeleteIcon />}>
                Delete
              </Button>
            }
            secondaryAction={
              <Checkbox
                edge="end"
                onChange={() => onChecked(m)}
                checked={m.approvato}
                inputProps={{ "aria-labelledby": labelId }}
              />
            }
            disablePadding
          >
            <ListItemButton>
              {m.immagineURL && (
                <img src={m.immagineURL} style={{ width: 50 }} />
              )}
              <ListItemText
                id={labelId}
                primary={`"${m.testo}" da ${m.autore}`}
              />
            </ListItemButton>
          </ListItem>
        );
      })}
    </List>
  );
}

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