import React from 'react';
import * as apollo from '@apollo/client';
import { screen, fireEvent } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { RestrictionLevel } from 'src/components/deliveryRestrictionsContext/types';
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: [RestrictionLevel.Product],
            },
        ];
        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(
                substoresQuery,
                'useLazySubstoresQuery'
            ).mockImplementation(({ storeId }) => {
                if (storeId === '102')
                    return [
                        jest.fn(),
                        {
                            data: { substores: substoresData },
                        } as apollo.QueryResult,
                    ];
                return [jest.fn(), { data: undefined } 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 store = screen.getByText('Store T102');
            fireEvent.click(store);

            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 product level restiction', () => {
            const { container } = renderComponent();
            const store = screen.getByText('Store T102');
            fireEvent.click(store);
            const notDeliveringCardComponent = container.querySelector(
                '.CountryXServicePairing-notDelivering'
            );
            expect(notDeliveringCardComponent).toBeInTheDocument();
            const deliveringServicesList =
                notDeliveringCardComponent?.querySelector(
                    '[data-testid="SuiteListViewList"]'
                );
            expect(deliveringServicesList).toHaveTextContent('USA');

            const notDeliveringTooltipComponent =
                container.querySelector('.Tooltip');
            expect(notDeliveringTooltipComponent).not.toBeInTheDocument();
        });

        test('not delivering counties sub-group component shows not delivering countries product account restiction', () => {
            const mockDeliveryRescrictions: ContextStoreTerritories[] = [
                {
                    storeId: '102',
                    storeName: 'Store T102',
                    restrictedCountries: [
                        {
                            continent: 'North America',
                            countryName: 'United States',
                            territoryName: 'USA',
                            territoryCodeA2: 'US',
                        },
                    ],
                    restrictedAtLevel: [RestrictionLevel.Account],
                },
            ];
            const defaultProps = {
                className:
                    'ProductModal-Components-ViewDeliveryRestrictions-subgroup',
                testId: 'ProductModal-Components-ViewDeliveryRestrictions-countryXServicePairing',
                countryXServiceRestrictions: mockDeliveryRescrictions,
            };

            const { container } = renderInAppContext(
                <CountryXServicePairing {...defaultProps} />
            );
            const store = screen.getByText('Store T102');
            fireEvent.click(store);
            const notDeliveringCardComponent = container.querySelector(
                '.CountryXServicePairing-notDelivering'
            );
            expect(notDeliveringCardComponent).toBeInTheDocument();
            const deliveringServicesList =
                notDeliveringCardComponent?.querySelector(
                    '[data-testid="SuiteListViewList"]'
                );
            expect(deliveringServicesList).toHaveTextContent('USA');

            const notDeliveringTooltipComponent =
                container.querySelector('.Tooltip');
            expect(notDeliveringTooltipComponent).toBeInTheDocument();
        });
    });
});