import React from 'react';
import { fireEvent, screen } from '@testing-library/react';
import { ToastProvider } from '@theorchard/suite-components';
import { renderInAppContext } from '@theorchard/suite-testing';
import paymentGroupPaymentResponse from 'src/__fixtures__/graphql/payment-group-payment-response.json';
import GenericPaymentApproval, {
    GenericPaymentApprovalProps,
} from '../generic-payment-approval';
import GenericPaymentStepWrapper from 'src/components/generic-payment-approval/components/generic-payment-step-wrapper';
import {
    ProcessedStepConfig,
    StepRenderProps,
} from 'src/components/generic-payment-approval/types';
import { HEADER_CLASSNAME as STEP_HEADER_CLASSNAME } from 'src/components/generic-payment-approval/components/generic-payment-step-wrapper/generic-payment-step-wrapper';

const step = (props: StepRenderProps, content: any) => {
    return (
        <GenericPaymentStepWrapper {...props}>
            {content}
        </GenericPaymentStepWrapper>
    );
};

const setIsOpen = jest.fn();

const defaultProps: GenericPaymentApprovalProps = {
    stepsConfig: [
        {
            id: 'step1',
            title: 'Step 1',
            Component: props =>
                step(props, <div>Component content of Step 1</div>),
        },
        {
            id: 'step2',
            title: 'Step 2',
            Component: props =>
                step(props, <div>Component content of Step 2</div>),
        },
    ],
    completedSteps: [],
    sidecarProps: {
        setIsOpen,
        isOpen: true,
    },
    paymentEntityId:
        paymentGroupPaymentResponse.abacusPaymentGroupPayment.paymentGroupPaymentId.toString(),
};

describe('<GenericPaymentApproval />', () => {
    const render = (props?: GenericPaymentApprovalProps) =>
        renderInAppContext(
            <ToastProvider>
                <GenericPaymentApproval {...defaultProps} {...props} />
            </ToastProvider>
        );

    it('default renders Sidecar and Stepper inside', () => {
        render();

        expect(screen.getByText('Payment Approval')).toBeInTheDocument();

        defaultProps.stepsConfig.forEach(s => {
            const step = s as ProcessedStepConfig;
            const title = screen.getByText(step.title);
            const stepHeader = title.closest(
                `[data-testid=${STEP_HEADER_CLASSNAME}]`
            );
            const dotGlyphIcon = stepHeader?.querySelector(
                `[data-testid="DotGlyphIcon"]`
            );
            const successGlyphIcon = stepHeader?.querySelector(
                `[data-testid="SuccessGlyphIcon"]`
            );
            const expandableButton = stepHeader?.querySelector(
                `[data-testid="ChevronUpGlyphIcon"]`
            );

            expect(title).toBeInTheDocument();
            expect(stepHeader).toBeInTheDocument();
            expect(dotGlyphIcon).toBeInTheDocument();
            expect(successGlyphIcon).not.toBeInTheDocument();
            expect(expandableButton).not.toBeInTheDocument();
        });

        const closeBtn = screen.getByTestId('CloseGlyphIcon');

        expect(closeBtn).toBeInTheDocument();

        fireEvent.click(closeBtn);

        expect(setIsOpen).toHaveBeenCalledWith(false);

        const footer = screen.getByTestId('ModalFooter');
        const cancelBtn = footer.querySelector('button');

        expect(cancelBtn).toBeInTheDocument();
        expect(cancelBtn?.textContent).toBe('Cancel');

        if (cancelBtn) fireEvent.click(cancelBtn);

        expect(setIsOpen).toHaveBeenCalledWith(false);
    });

    it('default render with completed steps', () => {
        const props = { ...defaultProps, completedSteps: ['step1', 'step2'] };

        render(props);

        defaultProps.stepsConfig.forEach(s => {
            const step = s as ProcessedStepConfig;
            const title = screen.getByText(step.title);
            const stepHeader = title.closest(
                `[data-testid=${STEP_HEADER_CLASSNAME}]`
            );
            const dotGlyphIcon = stepHeader?.querySelector(
                `[data-testid="DotGlyphIcon"]`
            );
            const successGlyphIcon = stepHeader?.querySelector(
                `[data-testid="SuccessGlyphIcon"]`
            );
            const expandableButton = stepHeader?.querySelector(
                `[data-testid="ChevronUpGlyphIcon"]`
            );

            expect(title).toBeInTheDocument();
            expect(stepHeader).toBeInTheDocument();
            expect(dotGlyphIcon).not.toBeInTheDocument();
            expect(successGlyphIcon).toBeInTheDocument();
            expect(expandableButton).toBeInTheDocument();
        });

        const footer = screen.getByTestId('ModalFooter');
        const cancelBtn = footer.querySelector('button');

        expect(cancelBtn).toBeInTheDocument();
        expect(cancelBtn?.textContent).toBe('Close');

        if (cancelBtn) fireEvent.click(cancelBtn);

        expect(setIsOpen).toHaveBeenCalledWith(false);
    });
});