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

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

import JalaliDateField from './JalaliDateField';

describe('<JalaliDateField/>', () => {
  const wrap = (ui: React.ReactNode) => render(<ThemeProvider>{ui}</ThemeProvider>);

  it('renders a read-only input showing the formatted value', () => {
    wrap(<JalaliDateField value="2026-07-17" onChange={jest.fn()} label="Date" />);
    const input = screen.getByLabelText('Date') as HTMLInputElement;
    expect(input).toHaveAttribute('readOnly');
    expect(input.value).not.toBe('');
  });

  it('opens the picker popover on click and emits the picked ISO date', () => {
    const onChange = jest.fn();
    wrap(<JalaliDateField value="2026-07-15" onChange={onChange} label="Date" />);
    fireEvent.click(screen.getByLabelText('Date'));
    expect(screen.getByText('July 2026')).toBeInTheDocument();
    fireEvent.click(screen.getByText('20'));
    expect(onChange).toHaveBeenCalledWith('2026-07-20');
  });
});
