import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { testComponent } from 'lib/test-utils/common';
import { ToggleButton } from '../toggleButton';
import type { ToggleButtonProps } from '../toggleButton';

describe('<ToggleButton>', () => {
    const defaultProps: ToggleButtonProps = {
        defaultValue: false,
        onChange: vi.fn(),
    };

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

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

    testComponent(ToggleButton);

    test('renders its default no-toggled state', () => {
        const { getByTestId } = renderComponent();

        const btn = getByTestId('ToggleButton');
        expect(btn).not.toHaveClass('toggled');
        expect(btn).toHaveClass('btn-tertiary');
    });

    test('renders with expected initial state from defaultValue prop', () => {
        const { getByTestId } = renderComponent({ defaultValue: true });

        const btn = getByTestId('ToggleButton');
        expect(btn).toHaveClass('toggled');
        expect(btn).toHaveClass('btn-secondary');
    });

    test('renders with controlled state from value prop', () => {
        const { getByTestId } = renderComponent({
            value: false,
        });

        const btn = getByTestId('ToggleButton');
        expect(btn).not.toHaveClass('toggled');
        expect(btn).toHaveClass('btn-tertiary');
    });

    test('toggles its own class on click and calls onChange callback with the new state', () => {
        const { getByTestId } = renderComponent({ defaultValue: true });

        const btn = getByTestId('ToggleButton');
        expect(btn).toHaveClass('toggled');

        fireEvent.click(btn);

        expect(defaultProps.onChange).toHaveBeenCalledWith(false);
        expect(btn).not.toHaveClass('toggled');
    });
});