import {
    fireEvent,
    render,
    screen,
} from '@testing-library/svelte';
import { tick } from 'svelte';
import {
    describe,
    expect,
    it,
    vi,
} from 'vitest';
import RoleField from './RoleField.svelte';

const baseProps = { fontName: 'Georgia', size: 24, weight: 400, leading: 1.4, tracking: 0 };

describe('RoleField', () => {
    it('renders the initial text', async () => {
        render(RoleField, { props: { role: 'header', text: 'Hello', oncommit: () => {}, ...baseProps } });
        await tick();
        expect(screen.getByRole('textbox').textContent).toBe('Hello');
    });

    it('commits the field text on blur (not on input)', async () => {
        const oncommit = vi.fn();
        render(RoleField, { props: { role: 'body', text: 'Start', oncommit, ...baseProps } });
        await tick();
        const field = screen.getByRole('textbox');
        field.textContent = 'Edited';
        await fireEvent.blur(field);
        expect(oncommit).toHaveBeenCalledWith('Edited');
    });

    it('prevents Enter on the header role (single-line)', async () => {
        render(RoleField, { props: { role: 'header', text: 'Title', oncommit: () => {}, ...baseProps } });
        await tick();
        const field = screen.getByRole('textbox');
        const event = new KeyboardEvent('keydown', { key: 'Enter', cancelable: true, bubbles: true });
        field.dispatchEvent(event);
        expect(event.defaultPrevented).toBe(true);
    });

    it('allows Enter on the body role (multi-line)', async () => {
        render(RoleField, { props: { role: 'body', text: 'Para', oncommit: () => {}, ...baseProps } });
        await tick();
        const field = screen.getByRole('textbox');
        const event = new KeyboardEvent('keydown', { key: 'Enter', cancelable: true, bubbles: true });
        field.dispatchEvent(event);
        expect(event.defaultPrevented).toBe(false);
    });
});