import { render, screen } from '../../test-utils';
import userEvent from '@testing-library/user-event';
import { ListItem, type ListItemProps } from '../ListItem';

describe('ListItem.Navigation', () => {
  const renderWith = (overrides: Partial<ListItemProps> = {}) =>
    render(<ListItem title="Test Title" {...overrides} />);

  describe('as button', () => {
    it('renders as button if onClick is set but no href', () => {
      renderWith({ control: <ListItem.Navigation onClick={() => {}} /> });
      expect(screen.getByRole('button')).toBeInTheDocument();
    });

    it('handles onClick events', async () => {
      const handleClick = jest.fn();
      renderWith({ control: <ListItem.Navigation onClick={handleClick} /> });

      await userEvent.click(screen.getByRole('button'));
      expect(handleClick).toHaveBeenCalledTimes(1);
    });

    it('respects disabled state', async () => {
      renderWith({
        disabled: true,
        control: <ListItem.Navigation onClick={jest.fn()} />,
      });
      expect(screen.queryByRole('button')).toBeDisabled();
      expect(screen.queryByRole('link')).not.toBeInTheDocument();
    });
  });

  describe('as link', () => {
    it('renders a link if href is set', () => {
      renderWith({ control: <ListItem.Navigation href="/test-path" /> });

      expect(screen.queryByRole('button')).not.toBeInTheDocument();
      expect(screen.getByRole('link')).toBeInTheDocument();
    });

    it('respects target prop', () => {
      renderWith({
        control: <ListItem.Navigation href="/test-path" target="_blank" />,
      });
      const link = screen.getByRole('link');
      expect(link).toHaveAttribute('target', '_blank');
      expect(link).toHaveAttribute('rel', 'noopener noreferrer');
    });

    it('handles onClick events', async () => {
      const handleClick = jest.fn();
      renderWith({ control: <ListItem.Navigation href="#target" onClick={handleClick} /> });

      await userEvent.click(screen.getByRole('link'));
      expect(handleClick).toHaveBeenCalledTimes(1);
    });
  });
});