// TODO: see if this file can be deleted, it is not iimported anywhere but its spec file.
import React, { useState } from 'react';
import { Button } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';

export interface PaymentGroupPaymentAccountDeleteButtonProps {
    deleteHandler: () => void;
    shouldResetApproval?: boolean;
    setResetWarningModalPopupName?: (name: string) => void;
    setIsResetWarningModalOpen?: (isOpen: boolean) => void;
    setPaymentAccountDetails?: () => void;
    setPaymentAccountCurrencyDetails?: () => void;
}

export default function PaymentGroupPaymentAccountDeleteButton({
    deleteHandler,
    shouldResetApproval,
    setResetWarningModalPopupName,
    setIsResetWarningModalOpen,
    setPaymentAccountDetails,
    setPaymentAccountCurrencyDetails,
}: PaymentGroupPaymentAccountDeleteButtonProps) {
    const [isConfirmVisible, setIsConfirmVisible] = useState(false);

    return (
        <div className="PaymentGroupDetails-accounts-delete">
            {isConfirmVisible ? (
                <div className="confirm">
                    Remove account?
                    <br />
                    <Button onClick={deleteHandler} variant="quartenary">
                        YES
                    </Button>
                    <span className="divider">|</span>
                    <Button
                        onClick={() => setIsConfirmVisible(false)}
                        variant="quartenary"
                    >
                        CANCEL
                    </Button>
                </div>
            ) : (
                <button
                    className="TableActionBtn btn btn-secondary btn-sm"
                    data-testid="payment-account-delete-span"
                    onClick={() => {
                        setPaymentAccountCurrencyDetails?.();
                        if (shouldResetApproval) {
                            setResetWarningModalPopupName?.('delete');
                            setIsResetWarningModalOpen?.(true);
                            setPaymentAccountDetails?.();
                        } else setIsConfirmVisible(true);
                    }}
                    onKeyPress={() => setIsConfirmVisible(true)}
                >
                    <GlyphIcon name="trash" size={16} />
                </button>
            )}
        </div>
    );
}