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

describe('MDXEditorField', () => {
    it('renders label and change handler in editable mode', () => {
        const onChange = vi.fn();

        render(
            <MDXEditorField
                label="Content"
                markdown=""
                onChange={onChange}
                themeClassName="light-theme"
                editorClassName="extra-editor"
                plugins={[]}
            />,
        );

        expect(screen.getByText('Content')).toHaveClass('ui-label');
        fireEvent.change(screen.getByLabelText('Markdown Editor'), {
            target: { value: '# Hello' },
        });
        expect(onChange).toHaveBeenCalledWith('# Hello');
        expect(screen.getByLabelText('Markdown Editor')).toHaveAttribute(
            'data-class-name',
            'light-theme extra-editor',
        );
    });

    it('renders preview and disabled classes when disabled', () => {
        render(
            <MDXEditorField
                label="Content"
                markdown="Disabled content"
                disabled
                themeClassName="dark-theme"
                plugins={[]}
            />,
        );

        const label = screen.getByText('Content');
        expect(label).toHaveClass('ui-label-disabled');
        expect(screen.getByTestId('md-preview')).toHaveTextContent('Disabled content');
        expect(screen.getByTestId('md-preview')).toHaveAttribute('data-class-name', 'dark-theme');
        expect(screen.queryByLabelText('Markdown Editor')).not.toBeInTheDocument();
        expect(document.querySelector('.post-mdx-editor--disabled')).toBeTruthy();
    });

    it('renders read-only preview without label when label is omitted', () => {
        render(
            <MDXEditorField
                markdown="Read only content"
                readOnly
                themeClassName="dark-theme"
                plugins={[]}
            />,
        );

        expect(screen.queryByText('Content')).not.toBeInTheDocument();
        expect(screen.getByTestId('md-preview')).toHaveTextContent('Read only content');
    });

    it('supports wrapper style/class overrides and error rendering', () => {
        render(
            <MDXEditorField
                label="Content"
                markdown=""
                themeClassName="light-theme"
                plugins={[]}
                editorWrapperClassName="editor-wrapper"
                editorWrapperStyle={{ borderWidth: '2px' }}
                error="Content is required"
            />,
        );

        const wrapper = document.querySelector('.editor-wrapper');
        expect(wrapper).toHaveClass('post-mdx-editor--enabled');
        expect(wrapper).toHaveStyle({ borderWidth: '2px' });
        expect(screen.getByText('Content is required')).toHaveClass('ui-error');
    });
});