/** @vitest-environment jsdom */
import { describe, it, expect, vi, afterEach } from 'vitest';
import { render, screen, cleanup, fireEvent } from '@testing-library/react';
import { ModalToolbar } from './ModalToolbar';
import { en } from '../i18n/en';

afterEach(cleanup);

describe('the modal toolbar', () => {
  it('shows how many try-ons are left', () => {
    render(
      <ModalToolbar quotaLabel="3 try-ons left" galleryCount={0} onOpenGallery={vi.fn()} t={en.gallery} />
    );
    expect(screen.getByText('3 try-ons left')).toBeDefined();
  });

  it('opens the gallery, with its size on the button', () => {
    const onOpenGallery = vi.fn();
    render(
      <ModalToolbar quotaLabel={null} galleryCount={4} onOpenGallery={onOpenGallery} t={en.gallery} />
    );

    const button = screen.getByText(en.gallery.openWithCount(4), { exact: false });
    fireEvent.click(button);
    expect(onOpenGallery).toHaveBeenCalledTimes(1);
  });

  it('offers no gallery before the shopper has one', () => {
    render(
      <ModalToolbar quotaLabel="3 try-ons left" galleryCount={0} onOpenGallery={vi.fn()} t={en.gallery} />
    );
    expect(screen.queryByText(en.gallery.open, { exact: false })).toBeNull();
  });

  // Nothing to say means no divider line eating space above the upload screen.
  it('renders nothing at all when there is neither a count nor a gallery', () => {
    const { container } = render(
      <ModalToolbar quotaLabel={null} galleryCount={0} onOpenGallery={vi.fn()} t={en.gallery} />
    );
    expect(container.innerHTML).toBe('');
  });
});