import { render, screen, fireEvent } from '@testing-library/react';
import { ThemeProvider } from '../../../theme';

jest.mock('next-intl', () => ({
  useLocale: () => 'en',
}));

import JalaliDateIntentPicker from './JalaliDateIntentPicker';
import { todayIso } from '../JalaliDatePicker/calendarEngine';

const LABELS = { todayLabel: 'Today', tomorrowLabel: 'Tomorrow', pickOtherLabel: 'Pick another date' };

function wrap(ui: React.ReactNode) {
  return render(<ThemeProvider>{ui}</ThemeProvider>);
}

describe('<JalaliDateIntentPicker/> component', () => {
  it('renders the near-date chip strip and emits the ISO date on click', () => {
    const onChange = jest.fn();
    const { container } = wrap(<JalaliDateIntentPicker value="" onChange={onChange} min={todayIso()} {...LABELS} />);
    const chips = container.querySelectorAll('[data-day]');
    expect(chips.length).toBeGreaterThan(0);
    fireEvent.click(chips[0]);
    expect(onChange).toHaveBeenCalledWith(todayIso());
  });

  it('opens a full-grid popover from the calendar-icon button', () => {
    wrap(<JalaliDateIntentPicker value="" onChange={jest.fn()} min={todayIso()} {...LABELS} />);
    fireEvent.click(screen.getByLabelText('Pick another date'));
    expect(screen.getByText(/\d{4}/)).toBeInTheDocument();
  });

  it('closes the popover and emits the picked date when a grid day is clicked', () => {
    const onChange = jest.fn();
    wrap(<JalaliDateIntentPicker value={todayIso()} onChange={onChange} {...LABELS} />);
    fireEvent.click(screen.getByLabelText('Pick another date'));
    const gridDay = screen.getAllByText('15')[0];
    fireEvent.click(gridDay);
    expect(onChange).toHaveBeenCalled();
  });
});
