import { fireEvent, render } from '@testing-library/react';
import TimedReleaseScheduleEditor from '../timed-release-schedule-editor';
import type { RenderResult } from '@testing-library/react';
import type { TimedReleaseScheduleEditorProps } from '../timed-release-schedule-editor';

describe('<TimedReleaseScheduleEditor>', () => {
    const onAddToSchedule = jest.fn();

    const defaultProps: TimedReleaseScheduleEditorProps = {
        className: 'editor',
        deliveryStores: [
            {
                id: '826',
                name: 'Spotify',
                supportsTimedRelease: true,
            },
            {
                id: '712',
                name: 'Apple',
                supportsTimedRelease: false,
            },
        ],
        disabledStores: [],
        carvedOutStores: [],
        hasTimedReleases: false,
        product: {
            productId: '123',
            productName: 'Vanishing Point',
            releaseSchedule: {
                timed: [],
                staggered: [],
                unsupportedTimed: [],
            },
        },
        onAddToSchedule,
    };

    beforeEach(() => {
        const mockIntersectionObserver = jest.fn();
        mockIntersectionObserver.mockReturnValue({
            observe: () => null,
            unobserve: () => null,
            disconnect: () => null,
        });
        window.IntersectionObserver = mockIntersectionObserver;
    });

    const renderWrapper = (
        props: Partial<TimedReleaseScheduleEditorProps> = {}
    ) => render(<TimedReleaseScheduleEditor {...defaultProps} {...props} />);

    test('matches snapshot', () => {
        const { container } = renderWrapper();
        expect(container).toMatchSnapshot();
    });

    describe('delivery store has been selected', () => {
        let wrapper: RenderResult;
        beforeEach(() => {
            wrapper = renderWrapper();
            const unsupportedStoreSelect =
                wrapper.getByTestId('select-unsupported');
            const [checkbox] = unsupportedStoreSelect
                .getElementsByClassName('form-check')[0]
                .getElementsByTagName('input');
            fireEvent.click(checkbox);
        });

        describe('pressing next', () => {
            let backButton: HTMLElement;
            beforeEach(() => {
                const button = wrapper.getByText(
                    $t('releaseScheduler.timedReleaseStoreSelector.next')
                );
                fireEvent.click(button);
                backButton = wrapper.getByText(
                    $t('releaseScheduler.timedReleaseTimeSelector.back')
                );
            });

            test('renders back button', () => {
                expect(backButton).toBeDefined();
            });

            describe('then pressing back', () => {
                beforeEach(() => {
                    fireEvent.click(backButton);
                });

                test('renders next button', () => {
                    expect(
                        wrapper.getByText(
                            $t(
                                'releaseScheduler.timedReleaseStoreSelector.next'
                            )
                        )
                    ).toBeDefined();
                });
            });
        });
    });
});