import React from 'react';
import { render } from '@testing-library/react';
import { testComponent } from 'lib/test-utils/common';
import { HiddenCount } from '../hiddenCount';
import type { Props } from '../hiddenCount';

describe('<HiddenCount>', () => {
    const defaultProps: Props = {
        showExpander: true,
        doubleChevron: true,
        expanded: false,
        hiddenCount: 5,
        onClick: vi.fn(),
    };

    const renderComponent = (customProps?: Partial<Props>) => {
        const props = { ...defaultProps, ...customProps } as Props;

        return render(<HiddenCount {...props} />);
    };

    testComponent(HiddenCount);

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

    test('renders with default properties and calls onClick when pressed', () => {
        const { getByText, getByTestId } = renderComponent();

        expect(getByText('+5')).toBeInTheDocument();

        const icon = getByTestId('HiddenCount-icon');
        expect(icon).toHaveClass('DoubleChevronDownGlyphIcon');

        const btn = getByTestId('HiddenCount-button');
        btn.click();

        expect(defaultProps.onClick).toHaveBeenCalled();
    });

    test('renders its expanded state', () => {
        const { queryByText, getByTestId } = renderComponent({ expanded: true });

        const icon = getByTestId('HiddenCount-icon');

        expect(icon).toBeInTheDocument();
        expect(queryByText('+')).not.toBeInTheDocument();
    });

    test('renders a single chevron icon', () => {
        const { getByTestId } = renderComponent({ doubleChevron: false });

        const icon = getByTestId('HiddenCount-icon');

        expect(icon).toHaveClass('ChevronDownGlyphIcon');
    });

    test('does not render the expander button', () => {
        const { queryByTestId } = renderComponent({ showExpander: false });

        expect(queryByTestId('HiddenCount-icon')).not.toBeInTheDocument();
    });

    test('does not render the expander button when disabled and button is disabled', () => {
        const { queryByTestId } = renderComponent({ showExpander: false });

        expect(queryByTestId('HiddenCount-button')).toBeDisabled();
        expect(queryByTestId('HiddenCount-icon')).not.toBeInTheDocument();
    });
});