import { useEffect, useState } from "react";
import App from "./components/app";
import { auth, db, getDocs, collection, query, where } from "../lib/fire";
import "./components/app.css";
import { Link } from "react-router-dom";

function Apps() {
    // eslint-disable-next-line no-unused-vars
    const [user, setUser] = useState(null);
    const [apps, setApps] = useState([]);
  
    useEffect(() => {
      const unsubscribe = auth.onAuthStateChanged(async (user) => {
        if (user) {
          setUser(user);
          const appsQuery = query(collection(db, "apps"), where("userid", "==", user.uid));
          const querySnapshot = await getDocs(appsQuery);
          const userApps = [];
          querySnapshot.forEach((doc) => {
            userApps.push({ id: doc.id, ...doc.data() });
          });
          setApps(userApps);
        } else {
          setUser(null);
          setApps([]);
        }
      });
  
      return () => unsubscribe();
    }, [user]);
  
    return (
      <div className="p-16 flex gap-4 wrap justify-start">
        {apps.map((app) => (
          <App key={app.id} name={app.name} id={app.id} />
        ))}
        <div className="app">
          <Link to={"/new"} className="text-black line-none">
            <div className="bg-blue-100 br-8 p-8 flex flex-col gap-2" style={{ height: "100%" }}>
              <span className="text-size-lg">
                <span className="material-symbols-outlined">
                  add
                </span>
              </span>
              <span className="text-size-md">
                New Project
              </span>
            </div>
          </Link>
        </div>
      </div>
    );
  }
  
  export default Apps;