import React from 'react';
import { screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { referenceMechanicalRates } from 'src/__fixtures__/graphql/reference-mechanical-rates';
import * as referenceMechanicalRatesQuery from 'src/apollo/queries/reference-mechanical-rate';
import MechanicalRates from 'src/components/reference/mechanical-rates';
import { getDateFromDateTimeStamp } from 'src/utils/date-helpers';
import type { GetReferenceMechanicalRatesQuery } from 'src/apollo/queries/reference-mechanical-rate/__generated__/get-reference-mechanical-rates';

describe('<MechanicalRates>', () => {
    const render = () => renderInAppContext(<MechanicalRates />);

    const mockMechRates =
        referenceMechanicalRates.abacusReferenceMechanicalRates.items;

    let requestSpy: jest.SpyInstance;

    beforeEach(() => {
        requestSpy = jest
            .spyOn(referenceMechanicalRatesQuery, 'useReferenceMechanicalRates')
            .mockReturnValue({
                data: referenceMechanicalRates as GetReferenceMechanicalRatesQuery,
                error: undefined,
                loading: false,
            });
    });

    it('renders', () => {
        const { container } = render();
        expect(container).toBeDefined();
    });

    it('requests referenceMechanicalRates on initial render', () => {
        render();
        expect(requestSpy).toHaveBeenCalled();
    });

    it('displays US mechanical rates', () => {
        const { container } = render();
        const containerText = container.textContent;

        expect(
            screen.getByText('United States Mechanical Rates')
        ).toBeInTheDocument();

        mockMechRates.forEach(rate => {
            expect(containerText).toContain(
                getDateFromDateTimeStamp(rate.effectiveStartDate)
            );
            expect(containerText).toContain(rate.baseRate);
            expect(containerText).toContain(rate.minuteRate);
        });
    });

    it('displays US ringtone rates', () => {
        const { container } = render();
        const containerText = container.textContent;

        expect(
            screen.getByText('United States Ringtone Rates')
        ).toBeInTheDocument();

        mockMechRates.forEach(rate => {
            expect(containerText).toContain(
                getDateFromDateTimeStamp(rate.effectiveStartDate)
            );
            expect(containerText).toContain(rate.ringtoneRate);
        });
    });
});