import React from 'react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { RestrictionLevel } from 'src/components/deliveryRestrictionsContext/types';
import CountryRestrictions, { Props } from '../countryRestrictions';
import type { ContextTerritory } from 'src/components/deliveryRestrictionsContext/types';

describe('<CountryRestrictions>', () => {
    const MOCK_TERRITORY_CARVEOUTS: ContextTerritory[] = [
        {
            __typename: 'Territory',
            continent: 'North America',
            countryName: 'United States',
            territoryCodeA2: 'US',
            territoryName: 'United States of America',
            id: 'orch-123',
            isSelected: true,
            isDelivering: true,
            restrictedAtLevel: [RestrictionLevel.Product],
        },
        {
            __typename: 'Territory',
            continent: 'North America',
            countryName: 'Canada',
            territoryCodeA2: 'CA',
            territoryName: 'Canada',
            id: 'orch-456',
            isSelected: true,
            isDelivering: false,
            restrictedAtLevel: [RestrictionLevel.Product],
        },
    ];

    afterEach(() => {
        jest.resetAllMocks();
    });

    const renderComponent = (props: Props) =>
        renderInAppContext(<CountryRestrictions {...props} />);

    test('CountryRestrictions renders correctly', () => {
        const { getByTestId } = renderComponent({
            territoryDeliveryRestrictions: MOCK_TERRITORY_CARVEOUTS,
        });

        const deliveringCard = getByTestId(
            'CountryRestrictions-delivering-count'
        );
        const notDeliveringCard = getByTestId(
            'CountryRestrictions-notDelivering-count'
        );

        const deliveringList = getByTestId(
            'CountryRestrictions-delivering-list'
        );
        const notDeliveringList = getByTestId(
            'CountryRestrictions-notDelivering-list'
        );

        expect(getByTestId('CountryRestrictions')).toBeInTheDocument();
        expect(deliveringCard).toBeInTheDocument();
        expect(notDeliveringCard).toBeInTheDocument();

        expect(deliveringCard).toHaveTextContent('1 out of 2 countries');
        expect(deliveringList.textContent).toContain('United States');

        expect(notDeliveringCard).toHaveTextContent('1 out of 2 countries');
        expect(notDeliveringList).toHaveTextContent('Canada');
    });

    test('all countries are delivering', () => {
        const allDelivering: ContextTerritory[] = [
            {
                ...MOCK_TERRITORY_CARVEOUTS[0],
                isDelivering: true,
            },
            {
                ...MOCK_TERRITORY_CARVEOUTS[1],
                isDelivering: true,
            },
        ];
        const { getByTestId } = renderComponent({
            territoryDeliveryRestrictions: allDelivering,
        });
        expect(
            getByTestId('CountryRestrictions-delivering-count')
        ).toHaveTextContent('2 out of 2 countries');
        expect(
            getByTestId('CountryRestrictions-notDelivering-count')
        ).toHaveTextContent('0 out of 2 countries');
        expect(
            getByTestId('CountryRestrictions-delivering-list').textContent
        ).toContain('United States');
        expect(
            getByTestId('CountryRestrictions-delivering-list').textContent
        ).toContain('Canada');
    });

    test('all countries are not delivering product level', () => {
        const allNotDelivering: ContextTerritory[] = [
            {
                ...MOCK_TERRITORY_CARVEOUTS[0],
                isDelivering: false,
            },
            {
                ...MOCK_TERRITORY_CARVEOUTS[1],
                isDelivering: false,
            },
        ];
        const { getByTestId } = renderComponent({
            territoryDeliveryRestrictions: allNotDelivering,
        });
        expect(
            getByTestId('CountryRestrictions-delivering-count')
        ).toHaveTextContent('0 out of 2 countries');
        expect(
            getByTestId('CountryRestrictions-notDelivering-count')
        ).toHaveTextContent('2 out of 2 countries');
        expect(
            getByTestId('CountryRestrictions-notDelivering-list').textContent
        ).toContain('United States');
        expect(
            getByTestId('CountryRestrictions-notDelivering-list').textContent
        ).toContain('Canada');

        const notDeliveringTooltipComponent = getByTestId(
            'CountryRestrictions-notDelivering-list'
        ).querySelector('.Tooltip');
        expect(notDeliveringTooltipComponent).not.toBeInTheDocument();
    });

    test('all countries are not delivering account level', () => {
        const allNotDelivering: ContextTerritory[] = [
            {
                ...MOCK_TERRITORY_CARVEOUTS[0],
                isDelivering: false,
                restrictedAtLevel: [RestrictionLevel.Account],
            },
            {
                ...MOCK_TERRITORY_CARVEOUTS[1],
                isDelivering: false,
                restrictedAtLevel: [RestrictionLevel.Account],
            },
        ];
        const { getByTestId } = renderComponent({
            territoryDeliveryRestrictions: allNotDelivering,
        });
        expect(
            getByTestId('CountryRestrictions-delivering-count')
        ).toHaveTextContent('0 out of 2 countries');
        expect(
            getByTestId('CountryRestrictions-notDelivering-count')
        ).toHaveTextContent('2 out of 2 countries');
        expect(
            getByTestId('CountryRestrictions-notDelivering-list').textContent
        ).toContain('United States');
        expect(
            getByTestId('CountryRestrictions-notDelivering-list').textContent
        ).toContain('Canada');

        const notDeliveringTooltipComponent = getByTestId(
            'CountryRestrictions-notDelivering-list'
        ).querySelector('.Tooltip');
        expect(notDeliveringTooltipComponent).toBeInTheDocument();
    });
});