import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import { SelectField } from '../SelectField';

describe('SelectField', () => {
  const options = [
    { label: 'Option A', value: 'a' },
    { label: 'Option B', value: 'b' },
    { label: 'Option C', value: 'c' }
  ];

  const defaultProps = {
    id: 'test-select',
    label: 'Test Select',
    value: '',
    field: 'month' as const,
    options,
    updateField: jest.fn()
  };

  it('should render label and select', () => {
    const { getByLabelText, getByText } = render(
      <SelectField {...defaultProps} />
    );
    expect(getByText('Test Select')).toBeInTheDocument();
    expect(getByLabelText('Test Select')).toBeInTheDocument();
  });

  it('should render trigger button with no value selected', () => {
    const { getByRole } = render(<SelectField {...defaultProps} />);
    const button = getByRole('button');
    expect(button).toBeInTheDocument();
    expect(button).toHaveAttribute('aria-expanded', 'false');
  });

  it('should render all options when dropdown is open', () => {
    const { getByRole, getByText } = render(<SelectField {...defaultProps} />);
    fireEvent.click(getByRole('button'));
    options.forEach(o => {
      expect(getByText(o.label)).toBeInTheDocument();
    });
  });

  it('should call updateField on option click', () => {
    const updateField = jest.fn();
    const { getByRole, getByText } = render(
      <SelectField {...defaultProps} updateField={updateField} />
    );
    fireEvent.click(getByRole('button'));
    fireEvent.click(getByText('Option B'));
    expect(updateField).toHaveBeenCalledWith('month', 'b');
  });

  it('should show error text when error is provided', () => {
    const { getByText } = render(
      <SelectField {...defaultProps} error="Please select" />
    );
    expect(getByText('Please select')).toBeInTheDocument();
  });

  it('should not show error text when no error', () => {
    const { queryByText } = render(<SelectField {...defaultProps} />);
    expect(queryByText('Please select')).not.toBeInTheDocument();
  });

  it('should show required asterisk when required', () => {
    const { container } = render(<SelectField {...defaultProps} required />);
    expect(container.querySelector('span')).toHaveTextContent('*');
  });
});