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

const CLASS_NAME = 'ConfirmModal';

type Props = {
    onConfirm(): void,
    onCancel(): void,
    isLoading?: boolean
    isError?: boolean
    confirmLabel: string
    confirmVariant?: React.ComponentProps<typeof Button>['variant']
    header: string
    body: React.ReactNode
    errorMessage?: string
    contentClass?: string
    cancelLabel?: string
    saveButtonVariant?: 'default' | 'loading'
};

const ConfirmModal: React.FC<Props> = ({
    onConfirm,
    onCancel,
    isLoading = false,
    isError = false,
    confirmLabel,
    confirmVariant = 'primary',
    header,
    body,
    errorMessage = formatMessage(messages.genericError),
    contentClass = `${CLASS_NAME}-content`,
    cancelLabel = formatMessage(messages.cancel),
    saveButtonVariant = 'default'
}) => {
    const renderSaveButton = () => {
        if (saveButtonVariant === 'loading')
            return (
                <LoadingButton
                    type="button"
                    variant={ confirmVariant }
                    onClick={ onConfirm }
                    loading={ isLoading }
                    aria-label={ confirmLabel }
                    data-testid="modal-confirm-button"
                >
                    { confirmLabel }
                </LoadingButton>
            );
        return (
            <Button
                type="button"
                variant={ confirmVariant }
                onClick={ onConfirm }
                disabled={ isLoading }
                aria-label={ confirmLabel }
                data-testid="modal-confirm-button"
            >
                { confirmLabel }
            </Button>
        );
    };
    return (
        <Modal
            className={ `${CLASS_NAME}` }
            onRequestClose={ onCancel }
            headerLabel={ header }
            isOpen={ true }
        >
            <div className={ contentClass }>
                { body }
                <div className={ `${CLASS_NAME}-footer` }>
                    { isError && (
                        <div className={ `${CLASS_NAME}-error` }>
                            { errorMessage }
                        </div>
                    ) }
                    <div className={ `${CLASS_NAME}-buttons` }>
                        <Button
                            type="button"
                            onClick={ onCancel }
                            aria-label={ cancelLabel }
                            data-testid="modal-cancel-button"
                        >
                            { cancelLabel }
                        </Button>
                        { renderSaveButton() }
                    </div>
                </div>
            </div>
        </Modal>
    );
};


export default ConfirmModal;