import React from 'react';
import { screen } from '@testing-library/react';
import { createIdentity, renderInAppContext } from '@theorchard/suite-testing';
import snakeCase from 'lodash-es/snakeCase';
import * as fullAccountResponse from 'src/__fixtures__/graphql/account-detail-response.json';
import PaymentHoldDetail, {
    type PaymentHoldDetailProps,
} from 'src/components/account-detail/payment-hold-detail';
import { ABACUS_PROFILE, HOLD_STATUSES } from 'src/constants';

describe('<PaymentHoldDetail>', () => {
    const identity = createIdentity({ profileType: ABACUS_PROFILE });
    const {
        abacusAccount: { accountId, paymentHoldHistory },
    } = fullAccountResponse;

    const defaultProps: PaymentHoldDetailProps = {
        accountId,
        eligibilityStatus: snakeCase(HOLD_STATUSES.ACTIVE),
        paymentHoldHistory,
    };

    const renderComponent = (props: PaymentHoldDetailProps) =>
        renderInAppContext(<PaymentHoldDetail {...props} />, { identity });

    it('renders', () => {
        const { getByText } = renderComponent(defaultProps);
        expect(getByText('Hold History')).toBeDefined();
    });

    it('renders an edit button', () => {
        renderComponent(defaultProps);

        const editButton = screen.getByTestId('accountDetailEditBtn');
        expect(editButton).toBeDefined();
        // @ts-expect-error: href does exist on button element
        expect(editButton.parentElement?.href).toContain('/payment-hold');
    });

    it('renders Alert box if Eligibility Status is on hold', () => {
        const onHoldProps = {
            ...defaultProps,
            eligibilityStatus: snakeCase(HOLD_STATUSES.ON_HOLD),
        };
        renderComponent(onHoldProps);
        expect(screen.getByTestId('Alert')).toBeDefined();
        expect(screen.getByText('Hold is currently active.')).toBeDefined();
    });
});