import type { FC } from 'react';
import React from 'react';
import { Status } from '@theorchard/suite-components';
import { PaymentEntityStatus } from 'src/types/payment-entity-status-indicator';

export interface PaymentEntityStatusIndicatorProps {
    closeBalanceStatus: PaymentEntityStatus | undefined;
    vatDocumentsStatus: PaymentEntityStatus;
    statementStatus: PaymentEntityStatus;
}

const CLASS_NAME = 'PaymentEntityStatusIndicator';

const PaymentEntityStatusIndicator: FC<PaymentEntityStatusIndicatorProps> = ({
    closeBalanceStatus,
    statementStatus,
    vatDocumentsStatus,
}) => {
    const renderStatus = () => {
        if (
            closeBalanceStatus === PaymentEntityStatus.BLOCKED ||
            vatDocumentsStatus === PaymentEntityStatus.BLOCKED
        ) {
            return (
                <Status
                    text={PaymentEntityStatus.BLOCKED}
                    filled
                    variant={'error'}
                />
            );
        }
        if (
            closeBalanceStatus === PaymentEntityStatus.COMPLETE &&
            vatDocumentsStatus === PaymentEntityStatus.COMPLETE &&
            statementStatus === PaymentEntityStatus.COMPLETE
        ) {
            return (
                <Status
                    text={PaymentEntityStatus.COMPLETE}
                    filled
                    variant={'success'}
                />
            );
        }
        return (
            <Status
                text={PaymentEntityStatus.IN_PROGRESS}
                filled
                variant={'warning'}
            />
        );
    };

    return <div className={CLASS_NAME}>{renderStatus()}</div>;
};

export default PaymentEntityStatusIndicator;