import React from 'react';
import { renderInAppContext } from '@theorchard/suite-testing';
import ServiceRestrictions from '../serviceRestrictions';
import type { ContextStore } from 'src/components/deliveryRestrictionsContext/types';

describe('<ServiceRestrictions>', () => {
    const mockDeliveryRescrictions: ContextStore[] = [
        {
            id: '111',
            name: 'Store Z111',
            isDelivering: true,
            isSelected: false,
            restrictedAtLevel: [],
        },
        {
            id: '112',
            name: 'Store Y112',
            isDelivering: true,
            isSelected: false,
            restrictedAtLevel: [],
        },
        {
            id: '113',
            name: 'Store Z113',
            isDelivering: true,
            isSelected: false,
            restrictedAtLevel: [],
        },
        {
            id: '114',
            name: 'Store W114',
            isDelivering: true,
            isSelected: false,
            restrictedAtLevel: [],
        },
        {
            id: '115',
            name: 'Store T115',
            isDelivering: true,
            isSelected: false,
            restrictedAtLevel: [],
        },
        {
            id: '101',
            name: 'Store T101',
            isDelivering: false,
            isSelected: false,
            restrictedAtLevel: [],
        },
        {
            id: '102',
            name: 'Store T102',
            isDelivering: true,
            isSelected: false,
            restrictedAtLevel: [],
        },
    ];
    const defaultProps = {
        deliveryRestrictions: mockDeliveryRescrictions,
    };

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

    test('delivering sub-group component', () => {
        const { getByTestId } = renderComponent();
        const deliveringCardComponent = getByTestId(
            'ServiceRestrictions-delivering'
        );
        expect(deliveringCardComponent).toBeInTheDocument();
        const headerContent = deliveringCardComponent.querySelector(
            '.ServiceRestrictions-card-subtitle'
        );
        expect(headerContent).toHaveTextContent('6 out of 7 services');

        const subtextContent = deliveringCardComponent.querySelector(
            '.ServiceRestrictions-delivering-subtext-with-icon'
        );
        expect(subtextContent).toHaveTextContent(
            'Deliveries aren’t automatic to all services and may require specific criteria.'
        );

        const deliveringServicesList = deliveringCardComponent?.querySelector(
            '[data-testid="SuiteListViewList"]'
        );
        expect(deliveringServicesList).toHaveTextContent('Store Z111');
        expect(deliveringServicesList).toHaveTextContent('Store Y112');
        expect(deliveringServicesList).toHaveTextContent('Store Z113');
        expect(deliveringServicesList).toHaveTextContent('Store W114');
        expect(deliveringServicesList).toHaveTextContent('Store T115');
        expect(deliveringServicesList).toHaveTextContent('Store T102');
        expect(deliveringServicesList).not.toHaveTextContent('Store T101');
    });

    test('not delivering sub-group component', () => {
        const { getByTestId } = renderComponent();
        const notDeliveringCardComponent = getByTestId(
            'ServiceRestrictions-notDelivering'
        );
        expect(notDeliveringCardComponent).toBeInTheDocument();
        const headerContent = notDeliveringCardComponent.querySelector(
            '.ServiceRestrictions-card-subtitle'
        );
        expect(headerContent).toHaveTextContent('1 out of 7 services');
        const notDeliveringServicesList =
            notDeliveringCardComponent?.querySelector(
                '[data-testid="SuiteListViewList"]'
            );
        expect(notDeliveringServicesList).toHaveTextContent('Store T101');
        expect(notDeliveringServicesList).not.toHaveTextContent('Store Z111');
        expect(notDeliveringServicesList).not.toHaveTextContent('Store Y112');
        expect(notDeliveringServicesList).not.toHaveTextContent('Store Z113');
        expect(notDeliveringServicesList).not.toHaveTextContent('Store W114');
        expect(notDeliveringServicesList).not.toHaveTextContent('Store T115');
        expect(notDeliveringServicesList).not.toHaveTextContent('Store T102');
    });
});