import type { PondView } from '@dorfteich/shared';
import { useQuery } from '@tanstack/react-query';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';

import { useAuth } from '../auth/auth-context';
import { apiGet } from '../lib/api';
import { useCurrentPondRoute } from './use-pond-route';

/** Top-bar dropdown to switch between the signed-in user's ponds (issue #26). */
export function PondSwitcher(): React.JSX.Element | null {
  const { t } = useTranslation();
  const { user } = useAuth();
  const { pondSlug } = useCurrentPondRoute();
  const [open, setOpen] = useState(false);
  const ponds = useQuery({
    queryKey: ['ponds'],
    queryFn: () => apiGet<PondView[]>('/ponds'),
    enabled: Boolean(user),
  });

  if (!ponds.data || ponds.data.length === 0) return null;
  const current = ponds.data.find((pond) => pond.slug === pondSlug);

  return (
    <div className="user-menu">
      <button
        type="button"
        className="user-menu__trigger"
        aria-haspopup="menu"
        aria-expanded={open}
        aria-label={t('layout.pondSwitcher.label')}
        onClick={() => setOpen(!open)}
      >
        {current?.name ?? t('layout.pondSwitcher.trigger')}
      </button>
      {open && (
        <div className="user-menu__list" role="menu">
          {ponds.data.map((pond) => (
            <Link
              key={pond.id}
              role="menuitem"
              to={`/p/${pond.slug}`}
              onClick={() => setOpen(false)}
            >
              {pond.name}
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}