import React from 'react';
import { GlyphIcon } from '@theorchard/suite-icons';
import type { WorksheetPaymentContractAdvancesQuery } from 'src/apollo/queries/payment-group-payment/__generated__/worksheet-payment-contract-advances';
import { getCurrentAdvancePaymentStatus } from 'src/utils/payments-list';

type ActionStates =
    WorksheetPaymentContractAdvancesQuery['worksheetPaymentContractAdvances']['items'][0]['actionStates'];

export interface ContractAdvanceQueuedStatusProps {
    actionStates: ActionStates;
}

export const ContractAdvanceQueuedStatus: React.FC<
    ContractAdvanceQueuedStatusProps
> = ({ actionStates }) => {
    const [actionStatus, actionName] =
        getCurrentAdvancePaymentStatus(actionStates);

    return (
        <div className="ContractAdvance-queued-status">
            <span
                className={`advance-status-icon ${actionStatus || 'payment-created'}`}
                data-testid={`advance-status-icon-${actionStatus}`}
            >
                <GlyphIcon
                    name="dot"
                    size={actionStatus == 'init' || !actionStatus ? 12 : 16}
                />{' '}
            </span>
            <span>{actionName || 'Payment created'}</span>
        </div>
    );
};