import React from 'react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { getProductMetadata } from 'lib/mockProductData';
import { getFingerprintRestrictionsRules } from 'lib/test/mocks/fingerprintRestrictionsRules';
import { useParams } from 'react-router-dom';
import * as fingerprintRulesQueries from 'src/data/queries/getAllFingerprintRules/getAllFingerprintRules';
import * as productQuery from 'src/data/queries/product/product';
import { CLASS_NAME as FP_CLASS_NAME } from 'src/pages/productEditModal/components/fingerprintRestrictions/fingerprintRestrictions';
import { CLASS_NAME as TABLE_CLASS_NAME } from 'src/pages/productEditModal/components/fingerprintRestrictions/fingerprintRestrictionsTable';
import { CLASS_NAME } from 'src/pages/productEditModal/productEditModal';
import ProductEditModalWrapper from 'src/pages/productEditModal/productEditModalWrapper';
import { SubmissionType } from 'src/types';

jest.mock('react-router-dom', () => ({
    ...jest.requireActual('react-router-dom'),
    useParams: jest.fn(),
}));

const useParamsSpy = useParams as jest.Mock;

const defaultProduct = getProductMetadata({
    productId: 33,
    productName: 'ABC',
});

describe('<ProductEditModalWrapper>', () => {
    const renderEditModal = (props = {}) => {
        const defaultProps = {
            productId: '123',
            submissionType: 'new' as SubmissionType,
        };

        useParamsSpy.mockReturnValue({
            ...defaultProps,
            ...props,
        });
        return renderInAppContext(<ProductEditModalWrapper />);
    };

    beforeEach(() => {
        jest.spyOn(productQuery, 'useProductQuery').mockImplementation(() => ({
            loading: false,
            error: undefined,
            data: defaultProduct,
            refetch: jest.fn(),
        }));

        jest.spyOn(
            fingerprintRulesQueries,
            'useGetAllFingerprintRules'
        ).mockImplementation(() => ({
            refetch: jest.fn(),
            loading: false,
            data: getFingerprintRestrictionsRules(),
            fetchMore: jest.fn(),
            fetchingMore: false,
            error: undefined,
        }));
    });

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

    it('renders ProductEditModal component', () => {
        const { getByTestId, getByText } = renderEditModal();
        const cancelBtn = getByTestId(`${CLASS_NAME}-button-cancel`);
        expect(cancelBtn).toBeInTheDocument();
        const saveBtn = getByTestId(`${CLASS_NAME}-button-save`);
        expect(saveBtn).toBeInTheDocument();
        expect(getByText('ABC')).toBeInTheDocument();

        expect(getByText('delivery')).toBeInTheDocument();
    });

    describe('<ProductEditDelivery>', () => {
        describe('<FingerprintRestrictions>', () => {
            it('renders the FingerprintRestrictions  when FF is on', () => {
                const { getByTestId, getByText } = renderEditModal();
                expect(
                    getByText('Fingerprint Restrictions')
                ).toBeInTheDocument();
                expect(
                    getByTestId(`${FP_CLASS_NAME}-search-input`)
                ).toBeInTheDocument();
                expect(getByTestId(`${TABLE_CLASS_NAME}`)).toBeInTheDocument();
            });
        });
    });
});