/**
 * Tests for DeveloperFab component
 */

import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { DeveloperFab } from './DeveloperFab';
import type { AccessLevel, Profile } from './types';

describe('DeveloperFab', () => {
  it('should render in development mode', () => {
    const accessLevels: AccessLevel[] = [
      { value: 'admin', label: 'Admin' },
      { value: 'user', label: 'User' },
    ];

    render(<DeveloperFab accessLevels={accessLevels} />);

    // FAB should be present (though button text depends on FAB implementation)
    expect(screen.getByRole('button')).toBeDefined();
  });

  // Note: Testing production mode behavior requires build-time environment
  // which is not feasible in unit tests. This would be tested in E2E tests.

  it('should render with access levels', () => {
    const accessLevels: AccessLevel[] = [
      { value: 'admin', label: 'Admin' },
      { value: 'user', label: 'User' },
    ];

    render(<DeveloperFab accessLevels={accessLevels} />);

    // Main button should be present
    expect(screen.getByRole('button')).toBeDefined();
  });

  it('should render with profiles', () => {
    const profiles: Profile[] = [
      { id: 'provider-1', name: 'Provider One' },
      { id: 'client-1', name: 'Client One' },
    ];

    render(<DeveloperFab profiles={profiles} />);

    // Main button should be present
    expect(screen.getByRole('button')).toBeDefined();
  });

  it('should render with storage category by default', () => {
    render(<DeveloperFab />);

    // Main button should be present when storage is enabled by default
    expect(screen.getByRole('button')).toBeDefined();
  });

  it('should not render when showStorage is false and no other categories', () => {
    const { container } = render(<DeveloperFab showStorage={false} />);

    // Should render nothing when no categories are configured
    expect(container.firstChild).toBeNull();
  });

  it('should render all categories when provided', () => {
    const accessLevels: AccessLevel[] = [
      { value: 'admin', label: 'Admin' },
    ];

    const profiles: Profile[] = [
      { id: 'provider-1', name: 'Provider One' },
    ];

    render(
      <DeveloperFab
        accessLevels={accessLevels}
        profiles={profiles}
        showStorage={true}
      />
    );

    // Main button should be present
    expect(screen.getByRole('button')).toBeDefined();
  });

  it('should use correct position prop', () => {
    const accessLevels: AccessLevel[] = [
      { value: 'admin', label: 'Admin' },
    ];

    const { rerender } = render(
      <DeveloperFab position="bottom-left" accessLevels={accessLevels} />
    );

    expect(screen.getByRole('button')).toBeDefined();

    rerender(
      <DeveloperFab position="bottom-right" accessLevels={accessLevels} />
    );

    expect(screen.getByRole('button')).toBeDefined();
  });
});