import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { ThemeProvider } from '../../theme';
import BankStatusPanel from './BankStatusPanel';

describe('<BankStatusPanel/> component', () => {
  it('renders the pending state with its chip and title', () => {
    const { container } = render(
      <ThemeProvider>
        <BankStatusPanel status="pending" chipLabel="Checking" title="Verifying ownership" body="Please wait" />
      </ThemeProvider>,
    );
    expect(container.querySelector('[data-status="pending"]')).toBeInTheDocument();
    expect(screen.getByText('Verifying ownership')).toBeInTheDocument();
    expect(screen.getByText('Checking')).toBeInTheDocument();
  });

  it('shows the masked IBAN on the verified state', () => {
    render(
      <ThemeProvider>
        <BankStatusPanel
          status="verified"
          chipLabel="Verified"
          title="Account verified"
          body="Ready for payouts"
          ibanMasked="••••3456"
          ibanLabel="IBAN"
        />
      </ThemeProvider>,
    );
    expect(screen.getByText('••••3456')).toBeInTheDocument();
  });

  it('offers the re-enter action only on mismatch', async () => {
    const user = userEvent.setup();
    const onReenter = jest.fn();
    render(
      <ThemeProvider>
        <BankStatusPanel
          status="mismatch"
          chipLabel="Mismatch"
          title="Must be your own account"
          body="Names do not match"
          onReenter={onReenter}
          reenterLabel="Enter another account"
        />
      </ThemeProvider>,
    );
    await user.click(screen.getByText('Enter another account'));
    expect(onReenter).toHaveBeenCalledTimes(1);
  });
});
