import React, { useEffect, useState } from "react";
import firebase from "firebase/app";
import { Stack } from "@mui/system";
import { CheckboxListSecondary } from "./index";

export const Admin = () => {
  const [messaggi, cambiaMessaggi] = useState([]);

  useEffect(() => {
    // Get a reference to the messages node in the Realtime Database
    var messagesRef = firebase.database().ref("/messaggi");
    console.log(messagesRef);

    messagesRef.on("value", function (snapshot) {
      var messaggi = snapshot.val();
      console.log(messaggi);
      messaggi = Object.keys(messaggi).map((d) => messaggi[d]);
      cambiaMessaggi(messaggi);
    });

    messagesRef.on("child_changed", function (snapshot) {
      var messaggio = snapshot.val();
      const i = messaggi.findIndex((m) => messaggio.timestamp === m.timestamp);
    });
  }, []);

  let element;
  if (!messaggi.length) {
    element = <div>nessun messaggio</div>;
  } else {
    element = (
      <CheckboxListSecondary
        messaggi={messaggi}
        onChecked={(m) => {
          firebase
            .database()
            .ref("messaggi/" + m.id)
            .update({
              approvato: !m.approvato,
            });
        }}
      />
    );
  }

  return (
    <Stack>
      <h2>Admin</h2>
      {element}
    </Stack>
  );
};
