import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';
import { IntlProvider } from 'react-intl';
import MessageTypeStep from '../MessageTypeStep';

const OPTIONS = [
  { value: 'promotional', label: 'Promotional', disabled: false },
  { value: 'transactional', label: 'Transactional', disabled: false },
];

function renderWithIntl(ui) {
  return render(
    <IntlProvider locale="en" messages={{}} defaultLocale="en">
      {ui}
    </IntlProvider>,
  );
}

describe('MessageTypeStep', () => {
  it('shows the step heading and one radio per option', () => {
    const onChange = jest.fn();
    renderWithIntl(
      <MessageTypeStep
        value="promotional"
        options={OPTIONS}
        defaultOption={{ value: 'promotional', label: 'Promotional' }}
        onChange={onChange}
      />,
    );

    expect(screen.getByText(/message type/i)).toBeInTheDocument();
    expect(screen.getByRole('radio', { name: /promotional/i })).toBeInTheDocument();
    expect(screen.getByRole('radio', { name: /transactional/i })).toBeInTheDocument();
    expect(screen.getByRole('radio', { name: /promotional/i })).toBeChecked();
  });

  it('uses defaultOption when value is null so the default appears selected', () => {
    const onChange = jest.fn();
    renderWithIntl(
      <MessageTypeStep
        value={null}
        options={OPTIONS}
        defaultOption={{ value: 'transactional', label: 'Transactional' }}
        onChange={onChange}
      />,
    );

    expect(screen.getByRole('radio', { name: /transactional/i })).toBeChecked();
    expect(screen.getByRole('radio', { name: /promotional/i })).not.toBeChecked();
  });

  it('calls onChange with the chosen message type when the user switches radios', async () => {
    const onChange = jest.fn();
    renderWithIntl(
      <MessageTypeStep
        value="promotional"
        options={OPTIONS}
        defaultOption={{ value: 'promotional', label: 'Promotional' }}
        onChange={onChange}
      />,
    );

    await userEvent.click(screen.getByRole('radio', { name: /transactional/i }));
    expect(onChange).toHaveBeenCalledWith('transactional');
  });

  it('disables individual options when configured', () => {
    const onChange = jest.fn();
    const withDisabled = [
      { value: 'promotional', label: 'Promotional', disabled: true },
      { value: 'transactional', label: 'Transactional', disabled: false },
    ];
    renderWithIntl(
      <MessageTypeStep
        value="transactional"
        options={withDisabled}
        onChange={onChange}
      />,
    );

    expect(screen.getByRole('radio', { name: /promotional/i })).toBeDisabled();
    expect(screen.getByRole('radio', { name: /transactional/i })).not.toBeDisabled();
  });

  it('shows validation error text below the radios', () => {
    const onChange = jest.fn();
    renderWithIntl(
      <MessageTypeStep
        value="promotional"
        options={OPTIONS}
        onChange={onChange}
        error="Please choose a message type"
      />,
    );

    expect(screen.getByText('Please choose a message type')).toBeInTheDocument();
  });
});
