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

describe('<ConfirmDialog/>', () => {
  const wrap = (ui: React.ReactNode) => render(<ThemeProvider>{ui}</ThemeProvider>);
  const base = {
    title: 'Run batch?',
    confirmLabel: 'Run',
    cancelLabel: 'Cancel',
    onClose: jest.fn(),
  };

  it('renders the title and body when open', () => {
    wrap(<ConfirmDialog open body="This moves money" onConfirm={jest.fn()} {...base} />);
    expect(screen.getByText('Run batch?')).toBeInTheDocument();
    expect(screen.getByText('This moves money')).toBeInTheDocument();
  });

  it('calls onConfirm with no reason for a plain confirm', () => {
    const onConfirm = jest.fn();
    wrap(<ConfirmDialog open onConfirm={onConfirm} {...base} />);
    fireEvent.click(screen.getByRole('button', { name: 'Run' }));
    expect(onConfirm).toHaveBeenCalledWith(undefined);
  });

  it('disables confirm until a required reason is entered, then passes it', () => {
    const onConfirm = jest.fn();
    wrap(<ConfirmDialog open requireReason reasonLabel="Reason" onConfirm={onConfirm} {...base} />);
    const confirmBtn = screen.getByRole('button', { name: 'Run' });
    expect(confirmBtn).toBeDisabled();
    fireEvent.change(screen.getByLabelText('Reason'), { target: { value: 'bad docs' } });
    expect(confirmBtn).not.toBeDisabled();
    fireEvent.click(confirmBtn);
    expect(onConfirm).toHaveBeenCalledWith('bad docs');
  });

  it('calls onClose from cancel', () => {
    const onClose = jest.fn();
    wrap(<ConfirmDialog open onConfirm={jest.fn()} {...base} onClose={onClose} />);
    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
    expect(onClose).toHaveBeenCalledTimes(1);
  });
});
