import React from 'react';
import * as apollo from '@apollo/client';
import { renderInAppContext } from '@theorchard/suite-testing';
import * as substoresQuery from 'src/data/queries/substores/substores';
import { CountryXServicePairing } from '../countryXServicePairing';
import type { ContextStoreTerritories } from 'src/components/deliveryRestrictionsContext/types';

describe('<CountryXServicePairing>', () => {
    describe('with no service selected', () => {
        const mockDeliveryRescrictions: ContextStoreTerritories[] = [
            {
                storeId: '102',
                storeName: 'Store T102',
                restrictedCountries: [],
                restrictedAtLevel: [],
            },
        ];
        const defaultProps = {
            className:
                'ProductModal-Components-ViewDeliveryRestrictions-subgroup',
            testId: 'ProductModal-Components-ViewDeliveryRestrictions-countryXServicePairing',
            countryXServiceRestrictions: mockDeliveryRescrictions,
        };

        const renderComponent = () =>
            renderInAppContext(<CountryXServicePairing {...defaultProps} />);

        test('stores sub-group component shows services', () => {
            const { container } = renderComponent();
            const deliveringCardComponent = container.querySelector(
                '.CountryXServicePairing-stores'
            );
            expect(deliveringCardComponent).toBeInTheDocument();
            const deliveringServicesList =
                deliveringCardComponent?.querySelector(
                    '[data-testid="SuiteListViewList"]'
                );
            expect(deliveringServicesList).toHaveTextContent('Store T102');
        });

        test('delivering counties sub-group component shows no options', () => {
            const { container } = renderComponent();
            const deliveringCardComponent = container.querySelector(
                '.CountryXServicePairing-delivering'
            );
            expect(deliveringCardComponent).toBeInTheDocument();
            const deliveringServicesList =
                deliveringCardComponent?.querySelector(
                    '[data-testid="SuiteListViewList"]'
                );
            expect(deliveringServicesList).toHaveTextContent('No options');
        });

        test('not delivering counties sub-group component shows no options', () => {
            const { container } = renderComponent();
            const deliveringCardComponent = container.querySelector(
                '.CountryXServicePairing-notDelivering'
            );
            expect(deliveringCardComponent).toBeInTheDocument();
            const deliveringServicesList =
                deliveringCardComponent?.querySelector(
                    '[data-testid="SuiteListViewList"]'
                );
            expect(deliveringServicesList).toHaveTextContent('No options');
        });
    });

    describe('with a service selected', () => {
        const mockDeliveryRescrictions: ContextStoreTerritories[] = [
            {
                storeId: '102',
                storeName: 'Store T102',
                restrictedCountries: [
                    {
                        continent: 'North America',
                        countryName: 'United States',
                        territoryName: 'USA',
                        territoryCodeA2: 'US',
                    },
                ],
                restrictedAtLevel: [],
            },
        ];
        const defaultProps = {
            className:
                'ProductModal-Components-ViewDeliveryRestrictions-subgroup',
            testId: 'ProductModal-Components-ViewDeliveryRestrictions-countryXServicePairing',
            countryXServiceRestrictions: mockDeliveryRescrictions,
        };

        const substoresData = {
            storeId: 12,
            territories: [
                {
                    continent: 'Europe',
                    countryName: 'United Kingdom',
                    territoryName: 'United Kingdom',
                    territoryCodeA2: 'GB',
                    __typename: 'Territory',
                },
                {
                    continent: 'North America',
                    countryName: 'United States',
                    territoryName: 'USA',
                    territoryCodeA2: 'US',
                    __typename: 'Territory',
                },
            ],
        };

        beforeEach(() => {
            jest.spyOn(React, 'useState').mockReturnValue(['102', jest.fn()]);
            jest.spyOn(substoresQuery, 'useLazySubstoresQuery').mockReturnValue(
                [
                    jest.fn(),
                    {
                        data: { substores: substoresData },
                    } as apollo.QueryResult,
                ]
            );
        });
        afterEach(() => jest.resetAllMocks());

        const renderComponent = () =>
            renderInAppContext(<CountryXServicePairing {...defaultProps} />);

        test('stores sub-group component shows services', () => {
            const { container } = renderComponent();
            const deliveringCardComponent = container.querySelector(
                '.CountryXServicePairing-stores'
            );
            expect(deliveringCardComponent).toBeInTheDocument();
            const deliveringServicesList =
                deliveringCardComponent?.querySelector(
                    '[data-testid="SuiteListViewList"]'
                );
            expect(deliveringServicesList).toHaveTextContent('Store T102');
        });

        test('delivering counties sub-group component shows delivering countries', () => {
            const { container } = renderComponent();

            const deliveringCardComponent = container.querySelector(
                '.CountryXServicePairing-delivering'
            );
            expect(deliveringCardComponent).toBeInTheDocument();
            const deliveringServicesList =
                deliveringCardComponent?.querySelector(
                    '[data-testid="SuiteListViewList"]'
                );
            expect(deliveringServicesList).toHaveTextContent('United Kingdom');
        });

        test('not delivering counties sub-group component shows not delivering countries', () => {
            const { container } = renderComponent();
            const deliveringCardComponent = container.querySelector(
                '.CountryXServicePairing-notDelivering'
            );
            expect(deliveringCardComponent).toBeInTheDocument();
            const deliveringServicesList =
                deliveringCardComponent?.querySelector(
                    '[data-testid="SuiteListViewList"]'
                );
            expect(deliveringServicesList).toHaveTextContent('USA');
        });
    });
});