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

jest.mock('next-intl', () => ({
  useTranslations: () => (key: string) => key,
}));

import CheckOutConfirmButton from './CheckOutConfirmButton';

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

  it('does not fire onConfirm on the first tap — it opens a confirm dialog', () => {
    const onConfirm = jest.fn();
    wrap(<CheckOutConfirmButton onConfirm={onConfirm} />);
    fireEvent.click(screen.getByText('evv_check_out'));
    expect(onConfirm).not.toHaveBeenCalled();
    expect(screen.getByText('evv_checkout_confirm_title')).toBeInTheDocument();
  });

  it('fires onConfirm only after the dialog is confirmed', () => {
    const onConfirm = jest.fn();
    wrap(<CheckOutConfirmButton onConfirm={onConfirm} />);
    fireEvent.click(screen.getByText('evv_check_out'));
    fireEvent.click(screen.getByText('evv_checkout_confirm_cta'));
    expect(onConfirm).toHaveBeenCalledTimes(1);
  });

  it('disables the button while busy and shows the checking-out label', () => {
    wrap(<CheckOutConfirmButton onConfirm={jest.fn()} busy />);
    expect(screen.getByText('evv_checking_out')).toBeInTheDocument();
    expect(screen.getByText('evv_checking_out').closest('button')).toBeDisabled();
  });
});
