import { describe, expect, jest, test } from '@jest/globals';
import { fireEvent, render, waitFor } from '@testing-library/react';
import * as React from 'react';
import { act } from 'react-dom/test-utils';

import * as Util from '../../src/Util';
import XmlEditor from '../../src/XmlEditor';

describe('XmlEditor component', () => {
    test('xml editor renders properly', () => {
        const ref: React.RefObject<XmlEditor> = React.createRef();
        let blah;
        act(() => {
            blah = render(
                <XmlEditor
                    docSpec={{}}
                    ref={ref}
                    xml="<xml />"
                />,
            );
        });
        
        expect(blah.container).toMatchSnapshot();
    });

    /* test('getXml() returns xml', () => {
        const ref: React.RefObject<XmlEditor> = React.createRef();
        render(
            <XmlEditor
                docSpec={{}}
                ref={ref}
                xml="<xml />"
            />,
        );
        //expect(ref.current?.getXml()).toBe(undefined);
        expect(true).toBe(true);
    }); */

    /* test('click should hide bubble', async () => {
        const {
            container,
            getByLabelText,
            getByText,
            queryByLabelText,
        } = render(
            <XmlEditor
                docSpec={{
                    elements: {
                        xml: {
                            attributes: {
                                foo: {
                                    asker: Util.askString,
                                },
                            },
                        },
                    },
                }}
                ref={React.createRef()}
                xml='<xml foo="bar" />'
            />,
        );
        await waitFor(() => getByText('bar'));
        fireEvent.click(getByText('bar'));
        // bubble open
        expect(getByLabelText('Value')).toBeTruthy();
        fireEvent.click(container.firstChild as any);
        // bubble closed
        expect(queryByLabelText('Value')).not.toBeTruthy();
    });

    test('Change xml should call onChange handler', async () => {
        const onChange = jest.fn();
        const { getByDisplayValue, getByText } = render(
            <XmlEditor
                docSpec={{
                    elements: {
                        xml: {
                            attributes: {
                                foo: {
                                    asker: Util.askString,
                                },
                            },
                        },
                    },
                }}
                onChange={onChange}
                ref={React.createRef()}
                xml='<xml foo="bar" />'
            />,
        );
        await waitFor(() => getByText('bar'));
        fireEvent.click(getByText('bar'));
        fireEvent.click(getByDisplayValue('OK'));
        expect(onChange).toBeCalled();
    }); */
});