import { Pill } from "@components/PillMentions.tsx";
import { guild } from "@localtypes";
import { ReactElement, useState } from "react";

let serverId = null;

export function ServerBar({setServerName, currentServer}: {setServerName: (name: string) => void, currentServer: string}): ReactElement {

  return (
    <div className="server-bar">
      <Guild guild={{channels: [], guildId: 2, members: [], name: "meow", unread: true, muted: false}} open={"meow" === currentServer} setServerName={setServerName} />
      <Guild guild={{channels: [], guildId: 2, members: [], name: "mrrow", unread: true, muted: false}} open={"mrrow" === currentServer} setServerName={setServerName} />
      <Guild guild={{channels: [], guildId: 2, members: [], name: "mrrp", unread: true, muted: false}} open={"mrrp" === currentServer} setServerName={setServerName} />
    </div>
  )
}

function Guild({guild, open, setServerName}: {guild: guild, open: boolean, setServerName: (name: string) => void}): ReactElement {
  const [hover, setHover] = useState(false);
  return (
    <div className="guild" onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} onClick={() => setServerName(guild.name)}>
      <Pill unread={guild.unread} muted={guild.muted} hover={hover} open={open} />
      <div className="guildname">{guild.name}</div>
    </div>
  )
}