import React from 'react';
import { Alert, Button, Section } from '@theorchard/suite-components';
import { isEmpty } from 'lodash-es';
import { Link } from 'react-router-dom';
import RestrictedByAbacusProfileWrapper from 'src/components/restricted-by-abacus-profile-wrapper';
import { ELIGIBILITY_STATUSES } from 'src/constants';
import { addPaymentHold } from 'src/urls/frontend-royalties';
import PaymentHoldHistory from '../shared/payment-hold-history';
import type { AccountDetailPaymentHoldHistory } from 'src/types/abacus-account';

export interface PaymentHoldDetailProps {
    accountId: string;
    eligibilityStatus: string;
    paymentHoldHistory: AccountDetailPaymentHoldHistory;
}

export default function PaymentHoldDetail({
    accountId,
    eligibilityStatus,
    paymentHoldHistory,
}: PaymentHoldDetailProps) {
    const isOnHold = eligibilityStatus === ELIGIBILITY_STATUSES.ON_HOLD;
    const hasHoldHistory = !isEmpty(paymentHoldHistory);
    const hasBody = isOnHold || hasHoldHistory;
    return (
        <div
            className="AccountDetail-payment-hold"
            data-testid="accountPaymentHold"
        >
            <Section>
                <Section>
                    <Section.Header title="Hold History">
                        <RestrictedByAbacusProfileWrapper>
                            <Link to={addPaymentHold(accountId)}>
                                <Button
                                    className="AccountDetail-edit-btn"
                                    data-testid="accountDetailEditBtn"
                                    type="button"
                                    variant="tertiary"
                                >
                                    Manage Hold
                                </Button>
                            </Link>
                        </RestrictedByAbacusProfileWrapper>
                    </Section.Header>
                    {hasBody && (
                        <Section.Body>
                            {isOnHold && (
                                <Alert
                                    variant="warn"
                                    text={
                                        <strong>
                                            Hold is currently active.
                                        </strong>
                                    }
                                />
                            )}
                            {hasHoldHistory && (
                                <PaymentHoldHistory
                                    holdHistory={paymentHoldHistory}
                                />
                            )}
                        </Section.Body>
                    )}
                </Section>
            </Section>
        </div>
    );
}