import React, { useEffect, useState } from "react";
import firebase from "firebase/app";
import { Button, Grid, Stack } from "@mui/material";
import videoSrc from "./video.mp4";
import logoSrc from "./logo.svg";
import { useInterval } from "./Countdown";

window.debug = false;

export const Proiezione = () => {
  const [messaggi, cambiaMessaggi] = useState([]);
  const [messaggiApprovati, cambiaMessaggiApprovati] = useState([]);
  const [indiceCorrente, cambiaindiceCorrente] = useState(0);

  useEffect(() => {
    var messagesRef = firebase.database().ref("/messaggi");

    messagesRef.on("child_added", function (snapshot) {
      console.log("child_added");
      var messaggio = snapshot.val();
      cambiaMessaggi((oldArray) => {
        const newArray = [...oldArray, messaggio].sort(
          (a, b) => b.timestamp - a.timestamp
        );
        cambiaMessaggiApprovati(newArray.filter((d) => d.approvato));
        return newArray;
      });
    });

    messagesRef.on("child_changed", function (snapshot) {
      console.log("child_changed");
      const messaggio = snapshot.val();
      cambiaMessaggi((oldArray) => {
        const newArray = [...oldArray];
        newArray.forEach((d, i, a) => {
          if (d.id === messaggio.id) a[i] = messaggio;
        });
        cambiaMessaggiApprovati(newArray.filter((d) => d.approvato));
        return newArray;
      });
    });
  }, []);

  const nextMessage = () => {
    if (!messaggiApprovati.length) return;
    const newIndice = (indiceCorrente + 1) % messaggiApprovati.length;
    cambiaindiceCorrente(newIndice);
  };

  const ContainerMessaggio = ({ messaggiApprovati, indiceCorrente }) => {
    if (!messaggiApprovati.length) {
      return <div>nessun messaggio</div>;
    } else {
      return (
        <Messaggio
          messaggiApprovati={messaggiApprovati}
          indiceCorrente={indiceCorrente}
          nextMessage={nextMessage}
        />
      );
    }
  };

  return (
    <div>
      <VideoComponent />
      <ContainerMessaggio
        messaggiApprovati={messaggiApprovati}
        indiceCorrente={indiceCorrente}
      />
      <img
        src={logoSrc}
        style={{
          width: 120,
          position: "absolute",
          top: 20,
          right: 20,
        }}
      />
    </div>
  );
};
const Immagine = ({ url }) => {
  return (
    <div
      style={{
        height: 400,
        width: 400,
        borderRadius: "50%",
        backgroundSize: "cover",
        backgroundImage: `url("${url}")`,
        backgroundPositionX: "center",
      }}
    ></div>
  );
};

const Messaggio = ({ nextMessage, messaggiApprovati, indiceCorrente }) => {
  const [timeLeft, setTimeLeft] = useState(6);
  const [fadeProp, setFadeProp] = useState("in");
  const [messaggioDaMostrare, setMessaggioDaMostrare] = useState(null);

  useEffect(() => {
    if (messaggiApprovati[indiceCorrente] != messaggioDaMostrare) {
      setFadeProp("out");
      setTimeout(() => {
        setMessaggioDaMostrare(messaggiApprovati[indiceCorrente]);
        setFadeProp("in");
      }, 1000);
    }
  }, [messaggiApprovati, indiceCorrente]);

  useInterval(() => {
    if (timeLeft === 1) {
      setFadeProp("out");
      setTimeout(() => {
        nextMessage();
      }, 2000);
    } else {
      setTimeLeft(timeLeft - 1);
    }
  }, 1000);

  return (
    <div className={"fade-" + fadeProp}>
      <div
        style={{
          position: "absolute",
          fontFamily: "Lineatura",
          width: "100%",
          height: "100vh",
          fontWeight: "bold",
          color: "white",
          display: "flex",
          justifyContent: "space-around",
          alignContent: "center",
          alignItems: "center",
          textAlign: "center",
        }}
      >
        {messaggioDaMostrare && (
          <div>
            {messaggioDaMostrare.immagineURL && (
              <Immagine url={messaggioDaMostrare.immagineURL} />
            )}
            <h1
              style={{
                textShadow:
                  "0px 0px 10px rgba(0,0,0,100), 0px 0px 10px rgba(0,0,0,100),  0px 0px 10px rgba(0,0,0,100)",
              }}
            >
              {messaggioDaMostrare.testo}
            </h1>
            <p
              style={{
                display: "inline-block",
                background: "black",
                padding: "0px 6px",
                paddingBottom: "4px",
              }}
            >
              da {messaggioDaMostrare.autore}
            </p>

            {debug && (
              <div>
                <Button onClick={() => nextMessage()}>next</Button>
                {timeLeft}
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
};

const VideoComponent = React.memo(() => {
  return (
    <video autoPlay muted loop id="myVideo">
      <source src={videoSrc} type="video/mp4" />
    </video>
  );
});
