import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import Modal from './Modal';

/**
 * فرم‌های بلند (ثبت نوبت) کلِ کارت را اسکرول می‌کردند، پس عنوان و دکمهٔ اصلی از دید
 * خارج می‌شد. حالا هدر و فوتر بیرون از ناحیهٔ اسکرول‌اند و فقط بدنه اسکرول می‌شود.
 */
describe('Modal', () => {
  const renderModal = (size?: 'sm' | 'md' | 'lg' | 'xl') =>
    render(
      <Modal open title="ثبت نوبت" size={size} onClose={vi.fn()} footer={<button>ثبت</button>}>
        <p>محتوای بلند</p>
      </Modal>,
    );

  it('هدر و فوتر بیرون از ناحیهٔ اسکرول می‌مانند', () => {
    renderModal();

    const body = document.querySelector('.modal-body');
    expect(body).not.toBeNull();
    expect(body!.textContent).toBe('محتوای بلند');
    // نه عنوان و نه دکمه نباید داخل بدنه باشند، وگرنه با محتوا اسکرول می‌شوند.
    expect(body!.querySelector('.modal-head')).toBeNull();
    expect(body!.querySelector('.modal-foot')).toBeNull();
    expect(screen.getByRole('button', { name: 'ثبت' }).closest('.modal-foot')).not.toBeNull();
  });

  it('عرض از size می‌آید', () => {
    const { unmount } = renderModal('sm');
    expect((document.querySelector('.modal') as HTMLElement).style.maxWidth).toBe('420px');
    unmount();

    renderModal('lg');
    expect((document.querySelector('.modal') as HTMLElement).style.maxWidth).toBe('720px');
  });

  it('بسته، هیچ چیزی رندر نمی‌کند', () => {
    render(<Modal open={false} title="ثبت نوبت" onClose={vi.fn()}><p>محتوا</p></Modal>);

    expect(document.querySelector('.modal')).toBeNull();
  });
});