import React, { useContext, useState } from 'react';
import { useToast } from '@theorchard/suite-components';
import { useHistory, useParams } from 'react-router-dom';
import { useSoftDeleteContractTerm } from 'src/apollo/mutations/contract-term';
import { PopupModal } from 'src/components/shared/popup-modal';
import { SET_ERRORS } from 'src/constants';
import { ContractTermContext } from 'src/contexts/contract-term-context';
import { getContractDetail } from 'src/urls/frontend-royalties';

export interface DeleteContractTermPopupPropType {
    isDeleteContractTermModalOpen: boolean;
    setIsDeleteContractTermModalOpen: any;
}

export const DeleteContractTermPopup: React.FC<
    DeleteContractTermPopupPropType
> = ({ isDeleteContractTermModalOpen, setIsDeleteContractTermModalOpen }) => {
    const { contractId, contractTermId } = useParams<{
        contractId: string;
        contractTermId: string;
    }>();
    const [isDeletingContractTerm, setIsDeletingContractTerm] = useState(false);
    const { state, dispatch } = useContext(ContractTermContext);
    const history = useHistory();
    const toast = useToast();
    const deleteContractTerm = useSoftDeleteContractTerm(contractId);

    const deleteHandler = () => {
        setIsDeletingContractTerm(true);
        deleteContractTerm({ variables: { contractTermId } })
            .then(() => {
                toast(
                    `Contract Term "${state.contractTermName}" deleted successfully.`
                );
                history.push(getContractDetail(contractId));
            })
            .catch(error => {
                dispatch({ type: SET_ERRORS, error: [error] });
                setIsDeleteContractTermModalOpen(false);
                setIsDeletingContractTerm(false);
            });
    };

    const modelContent = (
        <div
            className="DeleteContractTerm-modal"
            data-testid="DeleteContractTermModalTestId"
        >
            <p>Are you sure you want to delete this contract term?</p>
            <br />
            <p className="warning">You cannot undo this action!</p>
            <br />
        </div>
    );

    return (
        <PopupModal
            className="DeleteContractTerm-popup"
            closeHandler={() =>
                !isDeletingContractTerm &&
                setIsDeleteContractTermModalOpen(false)
            }
            headerLabel="WARNING"
            isOpen={isDeleteContractTermModalOpen}
            isSaveButtonDisabled={isDeletingContractTerm}
            modalContent={modelContent}
            saveButtonText="Confirm"
            saveHandler={() => deleteHandler()}
        />
    );
};