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

describe('TripDetailsStep', () => {
  const defaultProps: {
    formData: typeof EMPTY_FORM_DATA;
    errors: Record<string, string>;
    updateField: jest.Mock;
  } = {
    formData: EMPTY_FORM_DATA,
    errors: {},
    updateField: jest.fn()
  };

  it('should render section header', () => {
    const { getByText } = render(<TripDetailsStep {...defaultProps} />);
    expect(getByText('Your trip')).toBeInTheDocument();
  });

  it('should render departure and destination text inputs', () => {
    const { getByLabelText } = render(<TripDetailsStep {...defaultProps} />);
    expect(
      getByLabelText(/Which port\/airport would you like to go from/)
    ).toBeInTheDocument();
    expect(getByLabelText(/Where would you like to go/)).toBeInTheDocument();
  });

  it('should render month select with all months', () => {
    const { getByLabelText, getByText } = render(
      <TripDetailsStep {...defaultProps} />
    );
    const monthTrigger = getByLabelText(/When would you like to go/);
    fireEvent.click(monthTrigger);
    expect(getByText('January')).toBeInTheDocument();
    expect(getByText('December')).toBeInTheDocument();
  });

  it('should render year select', () => {
    const { container } = render(<TripDetailsStep {...defaultProps} />);
    expect(container.querySelector('#eq-year')).toBeInTheDocument();
  });

  it('should render duration select', () => {
    const { getByLabelText } = render(<TripDetailsStep {...defaultProps} />);
    expect(getByLabelText(/How long for/)).toBeInTheDocument();
  });

  it('should render adults and children selects', () => {
    const { getByLabelText } = render(<TripDetailsStep {...defaultProps} />);
    expect(
      getByLabelText(/How many adults are travelling/)
    ).toBeInTheDocument();
    expect(getByLabelText(/How many children/)).toBeInTheDocument();
  });

  it('should call updateField when changing departure', () => {
    const updateField = jest.fn();
    const { getByLabelText } = render(
      <TripDetailsStep {...defaultProps} updateField={updateField} />
    );
    fireEvent.change(
      getByLabelText(/Which port\/airport would you like to go from/),
      { target: { value: 'Gatwick' } }
    );
    expect(updateField).toHaveBeenCalledWith('departurePort', 'Gatwick');
  });

  it('should display errors', () => {
    const errors = {
      departurePort: 'Please enter your departure',
      month: 'Please select the month'
    };
    const { getByText } = render(
      <TripDetailsStep {...defaultProps} errors={errors} />
    );
    expect(getByText('Please enter your departure')).toBeInTheDocument();
    expect(getByText('Please select the month')).toBeInTheDocument();
  });
});