import React from 'react';
import { render, waitFor, screen, fireEvent } from '@testing-library/react';

import { ResourceBrowserInlineButton } from './ResourceBrowserInlineButton';

import * as ILES from './InlineLoadingErrorState/InlineLoadingErrorState';
jest.spyOn(ILES, 'InlineLoadingErrorState');

describe('ResourceBrowserInlineButton', () => {
    const defaultProps = {
        isLoading: false,
        error: undefined,
        useResource: () => {
            return {
                data: null,
                error: null,
                isLoading: false,
            };
        },
    };
    it('Render image icon if inline type is "image"', async () => {
        //@ts-ignore
        render(<ResourceBrowserInlineButton {...defaultProps} inlineType={'image'} />);

        await waitFor(() => {
            expect(screen.getByLabelText('change image')).toBeTruthy();
        });
    });

    it('Render link icon if inline type is "link"', async () => {
        //@ts-ignore
        render(<ResourceBrowserInlineButton {...defaultProps} inlineType={'link'} />);

        await waitFor(() => {
            expect(screen.getByLabelText('change link')).toBeTruthy();
        });
    });

    it('Render resource icon if inline type is "resource"', async () => {
        //@ts-ignore
        render(<ResourceBrowserInlineButton {...defaultProps} inlineType={'resource'} />);

        await waitFor(() => {
            expect(screen.getByLabelText('change resource')).toBeTruthy();
        });
    });

    it('On trigger press render loading if still awaiting external data', async () => {
        //@ts-ignore
        render(<ResourceBrowserInlineButton {...defaultProps} inlineType={'image'} isLoading={true} />);

        const button = screen.getByRole('button');
        fireEvent.click(button);

        await waitFor(() => {
            expect(ILES.InlineLoadingErrorState).toHaveBeenCalledWith(expect.objectContaining({ isLoading: true }), {});
        });
    });

    it('On trigger press render error if external error provided', async () => {
        const error = new Error('test');
        //@ts-ignore
        render(<ResourceBrowserInlineButton {...defaultProps} inlineType={'image'} error={error} />);

        const button = screen.getByRole('button');
        fireEvent.click(button);

        await waitFor(() => {
            expect(ILES.InlineLoadingErrorState).toHaveBeenCalledWith(expect.objectContaining({ error }), {});
        });
    });

    it('On trigger press render loading if still awaiting resource data', async () => {
        const useResource = () => {
            return { data: null, isLoading: true };
        };
        //@ts-ignore
        render(<ResourceBrowserInlineButton {...defaultProps} inlineType={'image'} useResource={useResource} />);

        const button = screen.getByRole('button');
        fireEvent.click(button);

        await waitFor(() => {
            expect(ILES.InlineLoadingErrorState).toHaveBeenCalledWith(expect.objectContaining({ isLoading: true }), {});
        });
    });
});