import React from 'react';
import { Modal, Button, LoadingButton } from '@orchard/frontend-react-components';
import { formatMessage } from '@orchard/frontend-localization';
import GenerateReportsFormConnected from 'src/components/generate-reports-form/generate-reports-form';
import messages from './i18n';

type Props = {
    onCancel(): void
    onSuccess(): void
};

const CLASS_NAME = 'GenerateReportsModal';

const GenerateReportsModal: React.FC<Props> = ({ onCancel, onSuccess }) => (
    <Modal className={ CLASS_NAME } isOpen onRequestClose={ onCancel } headerLabel={ formatMessage(messages.generateNewReportRun) }>
        <GenerateReportsFormConnected
            onSuccess={ onSuccess }
            renderFooter={ ({ loading, submitDisabled, handleSubmit }) => (
                <div className={ `${CLASS_NAME}-buttons` }>
                    <Button onClick={ onCancel } disabled={ loading }>
                        { formatMessage(messages.cancel) }
                    </Button>
                    <LoadingButton
                        variant="primary"
                        disabled={ submitDisabled }
                        onClick={ handleSubmit }
                        loading={ loading }
                    >
                        { formatMessage(messages.generate) }
                    </LoadingButton>
                </div>
            ) }
        />
    </Modal>
);

export default GenerateReportsModal;