import React, { useState } from 'react';
import {
    Button,
    HelpTooltip,
    Modal,
    useToast,
} from '@theorchard/suite-components';
import { useReleaseAbacusAccountPayeeHook } from 'src/apollo/mutations/release-abacus-account-payee';
import type { GetAccountFullDetailQuery } from 'src/apollo/queries/account/__generated__/get-account-full-detail';
import TitleWithGlyphIcon from 'src/components/shared/modal/title-with-glyph-icon';

type AbacusAccount = NonNullable<GetAccountFullDetailQuery['abacusAccount']>;
type PaymentPendingInCurrentStatementPeriodPropTypes = NonNullable<
    AbacusAccount['paymentPendingInCurrentStatementPeriod']
>;

export interface ReleasePayeeModalPropTypes {
    accountPayeeId: string;
    paymentPendingInCurrentStatementPeriod: PaymentPendingInCurrentStatementPeriodPropTypes | null;
}

const ReleasePayeeModal: React.FC<ReleasePayeeModalPropTypes> = ({
    accountPayeeId,
    paymentPendingInCurrentStatementPeriod,
}) => {
    const [open, setOpen] = useState(false);
    const toast = useToast();
    const closeModal = () => {
        setOpen(false);
    };

    const { releaseAccountPayee, loading: mutationLoading } =
        useReleaseAbacusAccountPayeeHook();

    return (
        <div className="ReleasePayeeModal">
            <div className="ReleasePayeeModal-Button-Container">
                <Button
                    variant="quartenary"
                    onClick={() => setOpen(true)}
                    disabled={!!paymentPendingInCurrentStatementPeriod}
                    loading={mutationLoading}
                    aria-pressed="false"
                    data-testid="buttonRelease"
                >
                    Release Payee from Payoneer
                </Button>
                {paymentPendingInCurrentStatementPeriod && (
                    <div className="withTooltip">
                        <HelpTooltip
                            id="PaymentPendingTooltip"
                            message="Warning: This Account is included in a payment this Statement Period on the basis of their current Payoneer onboarding. Please delete this payment or wait until next Statement Period before proceeding."
                            data-testid="PaymentPendingTooltip"
                        />
                    </div>
                )}
            </div>
            <Modal
                isOpen={open}
                onRequestClose={closeModal}
                title={
                    <TitleWithGlyphIcon
                        title="Release Payee from Payoneer?"
                        glyphIconProps={{ name: 'warning', size: 24 }}
                    />
                }
                onConfirm={() => {
                    if (accountPayeeId && releaseAccountPayee) {
                        releaseAccountPayee({
                            variables: {
                                accountPayeeId,
                            },
                        })
                            .then(response => {
                                if (response.data) {
                                    toast(
                                        'Successfully released from Payoneer'
                                    );
                                }
                            })
                            .catch(err => {
                                toast(
                                    'Release from Payoneer failed with an error: ' +
                                        JSON.stringify(
                                            err.message || err[0] || err
                                        ),
                                    { variant: 'danger' }
                                );
                            })
                            .finally(() => {
                                closeModal();
                            });
                    }
                }}
                confirmButtonProps={{
                    title: 'Confirm changes',
                    loading: mutationLoading,
                }}
                portalClassName="ReleasePayeeModalPortal"
            >
                <>
                    <p>
                        This action will remove the payee from their current
                        Payoneer program and require them to re-register before
                        receiving payments.
                    </p>
                    <p>
                        You’ll also need to select an Agreement Type to generate
                        a new registration link.
                    </p>
                </>
            </Modal>
        </div>
    );
};

export default ReleasePayeeModal;