import React, { useEffect, useState } from 'react';
import { Modal, useToast } from '@theorchard/suite-components';
import { useHistory, useParams } from 'react-router-dom';
import { useDeleteContract } from 'src/apollo/mutations/contract';
import {
    DELETED_CONTRACT_ERROR_MSG,
    DELETED_CONTRACT_MSG,
} from 'src/apollo/type-constants/contract';
import { getContractList } from 'src/urls/frontend-royalties';

export interface ContractDeleteModalPropsTypes {
    isContractDeleteModalOpen: boolean;
    onRequestCloseDeleteModal: () => void;
}

export const ContractDeleteModal: React.FC<ContractDeleteModalPropsTypes> = ({
    isContractDeleteModalOpen,
    onRequestCloseDeleteModal,
}) => {
    const { contractId } = useParams<{ contractId: string }>();
    const [isDeleteButtonDisabled, setIsDeleteButtonDisabled] =
        useState<boolean>(false);

    const deleteContract = useDeleteContract(contractId);
    const toast = useToast();
    const history = useHistory();

    const closeButtonHandler = () => {
        if (!isDeleteButtonDisabled) {
            setIsDeleteButtonDisabled(false);
            onRequestCloseDeleteModal();
        }
    };

    const deleteContractHandler = () => {
        const variables = { contractId };

        setIsDeleteButtonDisabled(true);

        deleteContract({ variables })
            .then(() => {
                onRequestCloseDeleteModal();
                toast(DELETED_CONTRACT_MSG);
                history.push(getContractList);
            })
            .catch(() => {
                onRequestCloseDeleteModal();
                toast(DELETED_CONTRACT_ERROR_MSG, { variant: 'error' });
            });
    };

    useEffect(() => {
        if (isContractDeleteModalOpen) setIsDeleteButtonDisabled(false);
    }, [isContractDeleteModalOpen]);

    const modalContent = (
        <>
            <div className="ContractDelete-Content">
                Once this contract is deleted, you will no longer be able to
                access it. This action is permanent and cannot be undone.
            </div>
        </>
    );

    return (
        <>
            <Modal
                className="ContractDelete"
                confirmButtonProps={{
                    disabled: isDeleteButtonDisabled,
                    title: 'Delete contract',
                    variant: 'danger-secondary',
                    onClick: deleteContractHandler,
                }}
                isOpen={isContractDeleteModalOpen}
                onRequestClose={closeButtonHandler}
                testId="ContractDeleteModal"
                title="Are you sure you want to delete this contract?"
            >
                {modalContent}
            </Modal>
        </>
    );
};