import React from 'react';
import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import StackedText, {
    CLASS_NAME_PRIMARY,
    CLASS_NAME_SECONDARY,
} from '../stacked-text';
import { EMPTY_CHAR } from '@theorchard/accounting-apps-shared';

const renderWithRouter = (ui: React.ReactElement) =>
    render(<MemoryRouter>{ui}</MemoryRouter>);

describe('StackedText', () => {
    describe('without showEmptyChar', () => {
        it('renders primary text as a link when primaryTextHref is provided', () => {
            renderWithRouter(
                <StackedText
                    primaryText="Primary"
                    primaryTextHref="/payments/123"
                    secondaryText="Secondary"
                />
            );

            expect(
                screen.getByRole('link', { name: 'Primary' })
            ).toHaveAttribute('href', '/payments/123');
            expect(screen.getByText('Secondary')).toBeInTheDocument();
        });

        it('renders both primary and secondary texts when provided', () => {
            renderWithRouter(
                <StackedText primaryText="Primary" secondaryText="Secondary" />
            );

            expect(screen.getByText('Primary')).toBeInTheDocument();
            expect(screen.getByText('Secondary')).toBeInTheDocument();
        });

        it('renders nothing for missing texts', () => {
            const { container } = renderWithRouter(<StackedText />);

            expect(
                container.querySelector(`.${CLASS_NAME_PRIMARY}`)
            ).not.toBeInTheDocument();
            expect(
                container.querySelector(`.${CLASS_NAME_SECONDARY}`)
            ).not.toBeInTheDocument();
        });
    });

    describe('with showEmptyChar', () => {
        it('renders a primary link in empty-char mode when href is provided', () => {
            renderWithRouter(
                <StackedText primaryTextHref="/payments/123" showEmptyChar />
            );

            expect(screen.getByRole('link')).toHaveAttribute(
                'href',
                '/payments/123'
            );
            expect(screen.getByRole('link')).toHaveTextContent(EMPTY_CHAR);
        });

        it('renders primaryText and secondaryText when provided', () => {
            renderWithRouter(
                <StackedText
                    primaryText="Primary"
                    secondaryText="Secondary"
                    showEmptyChar
                />
            );

            expect(screen.getByText('Primary')).toHaveClass(CLASS_NAME_PRIMARY);
            expect(screen.getByText('Secondary')).toHaveClass(
                CLASS_NAME_SECONDARY
            );
        });

        it('renders empty char for missing primaryText and secondaryText', () => {
            const { container } = renderWithRouter(
                <StackedText showEmptyChar />
            );
            const primary = container.querySelector(`.${CLASS_NAME_PRIMARY}`);
            const secondary = container.querySelector(
                `.${CLASS_NAME_SECONDARY}`
            );

            expect(primary).toBeInTheDocument();
            expect(primary).toHaveTextContent(EMPTY_CHAR);

            expect(secondary).toBeInTheDocument();
            expect(secondary).toHaveTextContent(EMPTY_CHAR);
        });
    });
});