// Fonctionnalité 
import React, { } from 'react'
import { BsPlus } from 'react-icons/bs';
import { FaDiscord } from 'react-icons/fa';
import { IoSettings } from 'react-icons/io5';
import ServersShow from '../../server/ServerShow'
import { Link } from 'react-router-dom';
import '../../home.css'
// Firebase
import { useAuthState } from "react-firebase-hooks/auth";
import { useCollection } from "react-firebase-hooks/firestore"
import 'firebase/compat/auth';
import { auth } from "../../../../auth/backend/database"
import database from "../../../../auth/backend/database";
import firebase from "firebase/compat/app";
import Swal from 'sweetalert2';

const Sidebar = () => {

  let serveurmp3 = new Audio("/serveur.mp3")
  const serveuraudio = () => {
    serveurmp3.play()
  }

  const db = firebase.firestore()
  const [user] = useAuthState(auth)
  const [server] = useCollection(db.collection("server"));

  const handleAddServer = () => {
    const serverName = prompt("Your Server name : ")
    if (serverName) {
      db.collection("server").add({
        serverName: serverName,
      });
    }
  };

  const Separation = () => <hr className="sidebar-hr" />;
  const SideBarIcon = ({ icon }) => (
    <div className="sidebar-icon group">
      {icon}
    </div>
  );

  return (
    <>
      <div className="fixed top-0 left-0 h-screen w-16 m-0 flex flex-col bg-gray-900 text-white shadow-lg abcde">
        <Link to="/home" style={{ textDecoration: 'none' }}>
          <SideBarIcon icon={<FaDiscord size="28" />} />
        </Link>
        <Separation />
        <div onClick={() => { serveuraudio(); handleAddServer(); }}>

          <SideBarIcon icon={<BsPlus size="32" />} />
        </div>

        {server?.docs.map((doc) => (
          <ServersShow
            key={doc.id}
            id={doc.id}
            serverName={doc.data().serverName}
          />
        ))}

        <Separation />
      </div>

    </>
  );
};


export default Sidebar;
