import { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import { EnvironmentSwitcherButton } from './EnvironmentSwitcherButton';
import type { Environment } from '../api/queries/admin/environments';

const envs: Environment[] = [
  {
    id: '11111111-1111-1111-1111-111111111111',
    slug: 'dev',
    displayName: 'Development',
    production: false,
    enabled: true,
    defaultContainerConfig: {},
    jarRetentionCount: 5,
    color: 'amber',
    createdAt: '2026-04-22T00:00:00Z',
  },
  {
    id: '22222222-2222-2222-2222-222222222222',
    slug: 'prod',
    displayName: 'Production',
    production: true,
    enabled: true,
    defaultContainerConfig: {},
    jarRetentionCount: 10,
    color: 'red',
    createdAt: '2026-04-22T00:00:00Z',
  },
];

describe('EnvironmentSwitcherButton', () => {
  it('renders the selected env display name', () => {
    render(<EnvironmentSwitcherButton envs={envs} value="dev" onClick={() => {}} />);
    expect(screen.getByText('Development')).toBeInTheDocument();
  });

  it('shows placeholder text when no env is selected', () => {
    render(<EnvironmentSwitcherButton envs={envs} value={undefined} onClick={() => {}} />);
    expect(screen.getByText(/select environment/i)).toBeInTheDocument();
  });

  it('fires onClick when pressed', () => {
    const onClick = vi.fn();
    render(<EnvironmentSwitcherButton envs={envs} value="dev" onClick={onClick} />);
    fireEvent.click(screen.getByRole('button', { name: /switch environment/i }));
    expect(onClick).toHaveBeenCalledOnce();
  });

  it('paints the color dot with the env color CSS variable', () => {
    const { container } = render(
      <EnvironmentSwitcherButton envs={envs} value="prod" onClick={() => {}} />,
    );
    const dot = container.querySelector('span[aria-hidden]');
    expect(dot).toBeTruthy();
    expect((dot as HTMLElement).style.background).toContain('env-color-red');
  });
});