import { useState } from "react";

import { useMe, useSetActiveGroup } from "../hooks/auth";
import { CreateGroupForm } from "./CreateGroupForm";

export function GroupSwitcher() {
  const { data: me } = useMe();
  const setActive = useSetActiveGroup();
  const [creating, setCreating] = useState(false);
  if (!me || me.groups.length === 0) return null;

  return (
    <div className="card">
      <h3>Мои группы</h3>
      <div className="stack">
        {me.groups.map((g) => {
          const active = g.id === me.active_group_id;
          return (
            <button
              key={g.id}
              className={"btn" + (active ? " btn-primary" : "")}
              onClick={() => !active && setActive.mutate(g.id)}
            >
              {g.name} {active && "✓"}
            </button>
          );
        })}
        {/* Плашка создания новой группы — в одном ряду логики с выбором группы. */}
        <button className="btn" onClick={() => setCreating((v) => !v)}>
          Создать группу
        </button>
      </div>

      {creating && (
        <div style={{ marginTop: 12 }}>
          <CreateGroupForm onCreated={() => setCreating(false)} />
        </div>
      )}
    </div>
  );
}