import React, { useEffect, useState } from 'react';
import { Alert, Modal, useToast } from '@theorchard/suite-components';
import { isArray } from 'lodash-es';
import { useParams } from 'react-router-dom';
import { useSoftDeleteContractFlowthrough } from 'src/apollo/mutations/contract-flowthrough';
import { deleteContractFlowthroughMessage } from 'src/apollo/type-constants/contract-flowthrough';

export interface DeleteContractFlowthroughModalProps {
    contractName: string;
    contractFlowthroughId: string;
    isDeleteFlowthroughModalOpen: boolean;
    onRequestCloseDeleteModal: () => void;
}

export const DeleteContractFlowthroughModal: React.FC<
    DeleteContractFlowthroughModalProps
> = ({
    contractName,
    contractFlowthroughId,
    isDeleteFlowthroughModalOpen,
    onRequestCloseDeleteModal,
}) => {
    const { contractId } = useParams<{ contractId: string }>();
    const [isDeleteButtonDisabled, setIsDeleteButtonDisabled] =
        useState<boolean>(false);
    const [error, setError] = useState<string | null>(null);

    const toast = useToast();
    const deleteContractFlowthrough =
        useSoftDeleteContractFlowthrough(contractId);

    const deleteHandler = () => {
        setIsDeleteButtonDisabled(true);
        const variables = {
            contractFlowthroughId,
        };

        deleteContractFlowthrough({ variables })
            .then(() => {
                onRequestCloseDeleteModal();
                toast(deleteContractFlowthroughMessage(contractName));
            })
            .catch(errors => {
                setIsDeleteButtonDisabled(false);
                if (isArray(errors)) setError(JSON.stringify(errors[0]));
                else setError(errors);
            });
    };

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

    const modalContent = (
        <>
            <div
                className="DeleteContractFlowthrough-Content"
                data-testid="deleteContractFlowthrough-content"
            >
                Once you delete the flowthrough rules for this contract you will
                need to <br />
                resubmit new rules.
            </div>
            {error && <Alert variant="error" text={error} />}
        </>
    );

    return (
        <Modal
            className="DeleteContractFlowthrough"
            confirmDisabled={isDeleteButtonDisabled}
            confirmTitle="Delete"
            isOpen={isDeleteFlowthroughModalOpen}
            onConfirm={deleteHandler}
            onRequestClose={
                isDeleteButtonDisabled
                    ? () => false
                    : () => {
                          setIsDeleteButtonDisabled(false);
                          onRequestCloseDeleteModal();
                      }
            }
            testId="deleteContractFlowthrough"
            title="Delete flowthrough for this contract?"
        >
            {modalContent}
        </Modal>
    );
};