import React, { useEffect, useState } from 'react';
import { Alert, Modal, useToast } from '@theorchard/suite-components';
import { useParams } from 'react-router-dom';
import { useReactivateContract } from 'src/apollo/mutations/contract';
import { updateContractMessage } from 'src/apollo/type-constants/contract';

export interface ContractReactivateModalPropsTypes {
    contractName: string;
    isContractReactivateModalOpen: boolean;
    onRequestCloseReactivateModal: () => void;
    onReactivateOpenContractRenewalSidecar: () => void;
}

export const ContractReactivateModal: React.FC<
    ContractReactivateModalPropsTypes
> = ({
    contractName,
    isContractReactivateModalOpen,
    onRequestCloseReactivateModal,
    onReactivateOpenContractRenewalSidecar,
}) => {
    const { contractId } = useParams<{ contractId: string }>();
    const [isReactivateButtonDisabled, setIsReactivateButtonDisabled] =
        useState<boolean>(false);
    const [error, setError] = useState<string | null>(null);

    const toast = useToast();
    const reactivateContract = useReactivateContract(contractId);

    const closeButtonHandler = () => {
        if (!isReactivateButtonDisabled) {
            setIsReactivateButtonDisabled(false);
            onRequestCloseReactivateModal();
        }
    };

    const reactivateContractHandler = () => {
        setIsReactivateButtonDisabled(true);
        const variables = { contractId };

        reactivateContract({ variables })
            .then(() => {
                onRequestCloseReactivateModal();
                toast(updateContractMessage(contractName));
                onReactivateOpenContractRenewalSidecar();
            })
            .catch(errors => {
                setIsReactivateButtonDisabled(false);
                setError(errors);
            });
    };

    useEffect(() => {
        if (isContractReactivateModalOpen) setIsReactivateButtonDisabled(false);
    }, [isContractReactivateModalOpen]);

    const modalContent = (
        <>
            <div className="ContractReactivate-Content">
                You can reactivate this contract, which is either terminated or
                set to be terminated. <br /> You will need to edit the renewal
                rules in order to reactivate.
            </div>
            {error && <Alert variant="error" text={error} />}
        </>
    );

    return (
        <>
            <Modal
                className="ContractReactivate"
                confirmDisabled={isReactivateButtonDisabled}
                confirmTitle="Reactivate"
                isOpen={isContractReactivateModalOpen}
                onConfirm={reactivateContractHandler}
                onRequestClose={closeButtonHandler}
                testId="ContractReactivateModal"
                title={`Reactivate Contract: ${contractName}?`}
            >
                {modalContent}
            </Modal>
        </>
    );
};