import React, { type Dispatch, type SetStateAction } from 'react';
import { Modal } from '@theorchard/suite-components';

export interface ApproveAccountingRunModalPropTypes {
    isApproveAccountingRunModalOpen: boolean;
    isSaveButtonDisabled: boolean;
    setIsApproveAccountingRunModalOpen: Dispatch<SetStateAction<boolean>>;
    saveHandler: () => void;
}

export const ApproveAccountingRunModal: React.FC<
    ApproveAccountingRunModalPropTypes
> = ({
    isApproveAccountingRunModalOpen,
    isSaveButtonDisabled,
    setIsApproveAccountingRunModalOpen,
    saveHandler,
}) => {
    const modalContent = (
        <div
            className="AccountingRun-modal"
            data-testid="AccountingRunModalTestId"
        >
            <p>
                Are you sure you want to approve the results of this accounting
                run?
            </p>
            <br />
            <p>
                Once approved, the run is finalized, and no changes can be made.
            </p>
            <br />
            <p className="warning">You cannot undo this action!</p>
            <br />
        </div>
    );

    return (
        <Modal
            isOpen={isApproveAccountingRunModalOpen}
            onRequestClose={() =>
                isSaveButtonDisabled
                    ? false
                    : setIsApproveAccountingRunModalOpen(false)
            }
            title="WARNING"
            confirmButtonProps={{
                disabled: isSaveButtonDisabled,
                variant: 'primary',
                loading: isSaveButtonDisabled,
                title: 'Approve',
                onClick: () => saveHandler(),
            }}
        >
            {modalContent}
        </Modal>
    );
};

export default ApproveAccountingRunModal;
