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

export interface DeleteContractSummaryNotesModalPropsTypes {
    contractName: string;
    isDeleteSummaryNotesModalOpen: boolean;
    onRequestCloseDeleteModal: () => void;
}

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

    const toast = useToast();
    const updateContract = useUpdateContract(contractId);

    const deleteHandler = () => {
        setIsDeleteButtonDisabled(true);
        const variables = {
            contractId,
            summaryNote: null,
        };

        updateContract({ variables })
            .then(() => {
                onRequestCloseDeleteModal();
                toast(deleteContractSummaryNotesMessage(contractName));
            })
            .catch(errors => {
                setIsDeleteButtonDisabled(false);
                setError(errors);
            });
    };

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

    const modalContent = (
        <>
            <div className="DeleteContractSummaryNotes-Content">
                <b>You are about to delete this contract summary notes.</b>
            </div>
            <div className="DeleteContractSummaryNotes-Content">
                <GlyphIcon name="warning" size={16} />
                <span className="WarningText">
                    This action can&apos;t be undone.
                </span>
            </div>
            {error && <Alert variant="error" text={error} />}
        </>
    );

    return (
        <>
            <Modal
                className="DeleteContractSummaryNotes"
                confirmDisabled={isDeleteButtonDisabled}
                confirmTitle="Delete"
                isOpen={isDeleteSummaryNotesModalOpen}
                onConfirm={deleteHandler}
                onRequestClose={
                    isDeleteButtonDisabled
                        ? () => false
                        : () => {
                              setIsDeleteButtonDisabled(false);
                              onRequestCloseDeleteModal();
                          }
                }
                testId="DeleteContractSummaryNotes"
                title="Delete Contract Summary Notes?"
            >
                {modalContent}
            </Modal>
        </>
    );
};