import React, { useState } from 'react';
import { Alert, GlyphButton } from '@theorchard/suite-components';
import { useFeatureFlag } from '@theorchard/suite-frontend';
import { useHistory } from 'react-router-dom';
import { useDeletePaymentGroupPayment } from 'src/apollo/mutations/payment-group-payment';
import { PopupModal } from 'src/components/shared/popup-modal';
import { PAYMENT_GROUP_PAYMENT_ACTIONS, USER_FEATURES } from 'src/constants';
import { getPaymentsListPage } from 'src/urls/frontend-royalties';

export interface PaymentGroupDetailOptionsProps {
    paymentGroupPaymentId: string;
    paymentGroupPaymentStatus?: string;
}

export default function PaymentGroupDetailOptions({
    paymentGroupPaymentId,
    paymentGroupPaymentStatus,
}: PaymentGroupDetailOptionsProps) {
    const [errors, setErrors] = useState(null);
    const history = useHistory();
    const [isDeleteConfirmModalOpen, setIsDeleteConfirmModalOpen] =
        useState(false);

    const isFeatureAbacusCreateAndApprovePaymentsEnabled = useFeatureFlag(
        USER_FEATURES.ABACUS_CREATE_AND_APPROVE_PAYMENTS
    );

    const { deletePaymentGroupPayment, loading: isDeleting } =
        useDeletePaymentGroupPayment();

    const modalContent = (
        <section>
            {errors && <Alert variant="error" text={errors} />}
            Deleting this payment will be permanent.
        </section>
    );

    const paymentCanBeDeleted =
        paymentGroupPaymentStatus &&
        paymentGroupPaymentStatus !==
            PAYMENT_GROUP_PAYMENT_ACTIONS.SEND_PAYMENTS;

    const saveDeleteConfirmHandler = () =>
        deletePaymentGroupPayment({ variables: { paymentGroupPaymentId } })
            .then(() => history.push(getPaymentsListPage))
            .catch(error => {
                setErrors(error);
            });

    return (
        <div className="paymentOptions">
            {paymentCanBeDeleted &&
                isFeatureAbacusCreateAndApprovePaymentsEnabled && (
                    <PopupModal
                        className="PaymentGroupDetails-confirm-delete-popup"
                        closeHandler={() => setIsDeleteConfirmModalOpen(false)}
                        closeButtonText="Cancel"
                        saveHandler={saveDeleteConfirmHandler}
                        saveButtonText="Delete Payment"
                        saveButtonVariant="danger"
                        modalContent={modalContent}
                        isOpen={isDeleteConfirmModalOpen}
                        isSaveButtonDisabled={isDeleting}
                        headerLabel="Delete This Payment?"
                    />
                )}
            {paymentCanBeDeleted &&
                isFeatureAbacusCreateAndApprovePaymentsEnabled && (
                    <GlyphButton
                        className="deleteButton"
                        onClick={() => setIsDeleteConfirmModalOpen(true)}
                        name="trash"
                    />
                )}
        </div>
    );
}