import React, { useState } from 'react';
import { Button, ToastProvider } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import { get } from 'lodash-es';
import { useParams } from 'react-router-dom';
import PaymentGroupDetailOptions from 'src/components/payment-group-detail/payment-group-detail-options';
import PaymentGroupPaymentApproval from 'src/components/payment-group-detail/components/payment-group-payment-approval';
import {
    PAYMENT_GROUP_PAYMENT_ACTIONS,
    PAYMENT_GROUP_PAYMENT_ACTION_STATUSES,
} from 'src/constants';
import { getCurrentPaymentAction } from 'src/utils/payments-list';
import type { PaymentGroupPayment } from 'src/types/payment-group';

export interface PaymentGroupDetailHeaderProps {
    paymentGroupPaymentDetails: PaymentGroupPayment;
    disableExport?: boolean;
}

export default function PaymentGroupDetailHeader({
    paymentGroupPaymentDetails,
    disableExport,
}: PaymentGroupDetailHeaderProps) {
    const { actionStates } = paymentGroupPaymentDetails;
    const { paymentGroupPaymentId } = useParams<{
        paymentGroupPaymentId: string;
    }>();
    const [isPaymentApprovalSidecarOpen, setIsPaymentApprovalSidecarOpen] =
        useState(false);

    const paymentAction = getCurrentPaymentAction(actionStates) || {};
    const paymentActionName = get(paymentAction, 'actionName', '');
    const paymentActionStatus = get(paymentAction, 'actionStatus', '');

    return (
        <div className="PaymentGroupDetails-top-header-right">
            {paymentActionName !==
                PAYMENT_GROUP_PAYMENT_ACTIONS.SEND_PAYMENTS && (
                <PaymentGroupDetailOptions
                    paymentGroupPaymentId={paymentGroupPaymentId}
                    paymentGroupPaymentStatus={paymentActionName}
                />
            )}
            {paymentActionName ===
                PAYMENT_GROUP_PAYMENT_ACTIONS.SEND_PAYMENTS &&
                paymentActionStatus ===
                    PAYMENT_GROUP_PAYMENT_ACTION_STATUSES.COMPLETE && (
                    <div className="PaymentGroupDetails-post-payment">
                        <GlyphIcon name="check" size={12} />
                        <span>Payments Sent</span>
                    </div>
                )}
            <span className="PaymentGroupDetails-approval-button">
                <Button
                    className="ActionButton"
                    variant="primary"
                    data-testid="actionButton"
                    disabled={disableExport}
                    onClick={() => setIsPaymentApprovalSidecarOpen(true)}
                >
                    Payment Approval
                </Button>
                <ToastProvider>
                    <PaymentGroupPaymentApproval
                        paymentEntityId={paymentGroupPaymentId}
                        setIsSidecarOpen={setIsPaymentApprovalSidecarOpen}
                        isSidecarOpen={isPaymentApprovalSidecarOpen}
                        paymentEntityDetails={paymentGroupPaymentDetails}
                    />
                </ToastProvider>
            </span>
        </div>
    );
}