import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import type { NavItem } from '../model/types';
import { MobileNav } from './MobileNav';

const ITEMS: NavItem[] = [{ id: 'about', label: 'About', number: '01' }];

describe('MobileNav', () => {
  describe('rendering', () => {
    it('renders title "allmy.work"', () => {
      render(<MobileNav items={ITEMS} />);
      expect(screen.getByText('allmy.work')).toBeInTheDocument();
    });

    it('renders toggle button with text "Menu" initially', () => {
      render(<MobileNav items={ITEMS} />);
      expect(screen.getByRole('button', { name: 'Menu' })).toBeInTheDocument();
    });

    it('menu items are hidden initially', () => {
      render(<MobileNav items={ITEMS} />);
      expect(screen.queryByRole('button', { name: /about/i })).not.toBeInTheDocument();
    });
  });

  describe('interactions', () => {
    it('click toggle shows item buttons and changes label to "Close"', async () => {
      render(<MobileNav items={ITEMS} />);
      await userEvent.click(screen.getByRole('button', { name: 'Menu' }));
      expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
      expect(screen.getByText('About')).toBeInTheDocument();
    });

    it('click item button closes the menu', async () => {
      render(<MobileNav items={ITEMS} />);
      await userEvent.click(screen.getByRole('button', { name: 'Menu' }));
      // item button label contains number + label text; find by accessible name fragment
      const itemBtn = screen.getAllByRole('button').find((b) => b.textContent?.includes('About'));
      expect(itemBtn).toBeDefined();
      await userEvent.click(itemBtn as HTMLElement);
      expect(screen.queryByText('Close')).not.toBeInTheDocument();
      expect(screen.getByRole('button', { name: 'Menu' })).toBeInTheDocument();
    });
  });
});