import React from 'react';
import { GlyphIcon } from '@theorchard/suite-icons';
import { renderInAppContext } from '@theorchard/suite-testing';
import { testComponent } from 'lib/test-utils/common';
import { InfoMessage, InfoMessageProps } from '../infoMessage';

describe('<InfoMessage>', () => {
    const body = 'alotoftext';
    const message = 'waitwhat?';
    const defaultProps: InfoMessageProps = { message, body };

    const renderComponent = (props: Partial<InfoMessageProps> = {}) =>
        renderInAppContext(<InfoMessage {...defaultProps} {...props} />);

    testComponent(InfoMessage, defaultProps);

    test('applies style', () => {
        const r = renderComponent({ style: { marginTop: 10 } });
        expect(r.getByTestId('InfoMessage')).toHaveStyle({ marginTop: '10px' });
    });

    test('renders message', () => {
        const wrapper = renderComponent();
        expect(wrapper.getByText(message)).toBeVisible();
    });

    test('renders body', () => {
        const wrapper = renderComponent();
        expect(wrapper.getByText(body)).toBeVisible();
    });

    describe('children', () => {
        test('renders alongside description', () => {
            const childText = 'subtext';
            const wrapper = renderComponent({ children: <span>{childText}</span> });
            expect(wrapper.getByText(body)).toBeVisible();
            expect(wrapper.getByText(childText)).toBeVisible();
        });
    });

    describe('Icon prop', () => {
        test('renders default icon', () => {
            const wrapper = renderComponent();
            expect(wrapper.getByTestId('InfoMessage').querySelector('svg')).toBeVisible();
        });

        test('renders custom FC icon', () => {
            const Icon = () => <GlyphIcon name="search" size={16} />;
            const wrapper = renderComponent({ Icon });
            expect(wrapper.getByTestId('SearchGlyphIcon')).toBeVisible();
        });
    });

    describe('variant prop', () => {
        test('full-page variant', () => {
            const { getByTestId, getByRole } = renderComponent({ variant: 'full-page' });

            expect(getByTestId('InfoMessage')).toHaveClass('InfoMessage-full-page');
            expect(getByTestId('EmptyStateIllustration')).toHaveAttribute('width', '200');
            expect(getByRole('heading', { level: 1 })).toBeVisible();
        });

        test('large variant', () => {
            const { getByTestId, getByRole } = renderComponent({ variant: 'large' });

            expect(getByTestId('InfoMessage')).toHaveClass('InfoMessage-large');
            expect(getByTestId('EmptyStateIllustration')).toHaveAttribute('width', '100');
            expect(getByRole('heading', { level: 4 })).toBeVisible();
        });

        test('medium variant', () => {
            const { getByTestId, getByRole } = renderComponent({ variant: 'medium' });

            expect(getByTestId('InfoMessage')).toHaveClass('InfoMessage-medium');
            expect(getByTestId('EmptyStateIllustration')).toHaveAttribute('width', '100');
            expect(getByRole('heading', { level: 4 })).toBeVisible();
        });

        test('small variant', () => {
            const { getByTestId, getByRole } = renderComponent({ variant: 'small' });

            expect(getByTestId('InfoMessage')).toHaveClass('InfoMessage-small');
            expect(getByTestId('EmptyStateIllustration')).toHaveAttribute('width', '50');
            expect(getByRole('heading', { level: 4 })).toBeVisible();
        });
    });

    describe('description', () => {
        test('renders description', () => {
            const description = 'Test description';
            const wrapper = renderComponent({ description });
            expect(wrapper.getByText(description)).toBeVisible();
        });

        test('description takes precedence over body', () => {
            const description = 'New description';
            const wrapper = renderComponent({ description, body: 'Old body' });
            expect(wrapper.getByText(description)).toBeVisible();
            expect(wrapper.queryByText('Old body')).toBeNull();
        });
    });

    describe('title', () => {
        test('renders title', () => {
            const title = 'Test title';
            const wrapper = renderComponent({ title });
            expect(wrapper.getByText(title)).toBeVisible();
        });

        test('title takes precedence over message', () => {
            const title = 'New title';
            const wrapper = renderComponent({ title, message: 'Old message' });
            expect(wrapper.getByText(title)).toBeVisible();
            expect(wrapper.queryByText('Old message')).toBeNull();
        });
    });

    describe('width prop', () => {
        test('applies custom width', () => {
            const { getByTestId } = renderComponent({ width: 600 });
            expect(getByTestId('InfoMessage')).toHaveStyle({ width: '600px' });
        });

        test('applies default width when not specified', () => {
            const { getByTestId } = renderComponent();
            expect(getByTestId('InfoMessage')).toHaveStyle({ width: undefined });
        });
    });
});