import React, { useState } from 'react';
import { Button, Modal } from '@theorchard/suite-components';

interface EntityBulkEditProcessingStatusPropTypes {
    onApply: () => void;
    isLoading: boolean;
}

const EntityBulkEditApplyButton: React.FC<
    EntityBulkEditProcessingStatusPropTypes
> = ({ onApply, isLoading }) => {
    const [open, setOpen] = useState(false);
    const closeModal = () => {
        setOpen(false);
    };

    return (
        <>
            <div className="EntityBulkEditFileInfo-actions">
                <Button onClick={() => setOpen(true)} disabled={isLoading}>
                    Apply
                </Button>
            </div>
            <Modal
                isOpen={open}
                onRequestClose={closeModal}
                header="Apply the data?"
                confirmButtonProps={{
                    onClick: () => {
                        onApply();
                        closeModal();
                    },
                }}
                confirmTitle="Apply"
            >
                Please make sure you have carefully validated the data in the
                file. This action cannot be easily undone.
                <br />
                <br />
                Are you sure you want to apply the data?
            </Modal>
        </>
    );
};

export default EntityBulkEditApplyButton;