import React from 'react';
import { fireEvent, screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import PaymentGroupPaymentAccountDeleteButton, {
    type PaymentGroupPaymentAccountDeleteButtonProps,
} from 'src/components/payment-group-detail/payment-group-payment-account-delete-button';

describe('<PaymentGroupPaymentAccountDeleteButton />', () => {
    const componentProps = {
        deleteHandler: jest.fn(),
        shouldResetApproval: false,
        setResetWarningModalPopupName: jest.fn(),
        setIsResetWarningModalOpen: jest.fn(),
        setPaymentAccountDetails: jest.fn(),
        setPaymentAccountCurrencyDetails: jest.fn(),
    };

    const render = (props: PaymentGroupPaymentAccountDeleteButtonProps) =>
        renderInAppContext(
            <PaymentGroupPaymentAccountDeleteButton {...props} />
        );

    it('renders a delete button as a trash glyph', () => {
        render(componentProps);
        const deleteSpan = screen.getByTestId('payment-account-delete-span');
        expect(deleteSpan.querySelector('.TrashGlyphIcon')).toBeTruthy();
    });

    it('shows a confirmation message when delete button is clicked', () => {
        render(componentProps);
        const deleteSpan = screen.getByTestId('payment-account-delete-span');
        fireEvent.click(deleteSpan);
        expect(screen.getByText('Remove account?')).toBeTruthy();
    });

    it('hides the confirmation message when CANCEL is clicked', () => {
        render(componentProps);

        const deleteSpan = screen.getByTestId('payment-account-delete-span');
        fireEvent.click(deleteSpan);

        const cancelBtn = screen.getByText('CANCEL');
        fireEvent.click(cancelBtn);
        expect(deleteSpan.querySelector('.TrashGlyphIcon')).toBeTruthy();
    });

    it('calls the deleteHandler when YES is clicked', () => {
        render(componentProps);
        const deleteSpan = screen.getByTestId('payment-account-delete-span');
        fireEvent.click(deleteSpan);

        const yesBtn = screen.getByText('YES');
        fireEvent.click(yesBtn);

        expect(componentProps.deleteHandler).toHaveBeenCalled();
    });

    it('on delete button click open approval reset warning message popup', () => {
        render({ ...componentProps, shouldResetApproval: true });
        const deleteSpan = screen.getByTestId('payment-account-delete-span');
        fireEvent.click(deleteSpan);

        expect(componentProps.setIsResetWarningModalOpen).toHaveBeenCalled();
    });
});