import type { ReactElement } from 'react';
import React from 'react';
import { Modal } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';

export interface PopupModalPropType {
    closeButtonText?: string;
    closeHandler: () => void;
    headerLabel?: ReactElement | string;
    isOpen: boolean;
    modalContent: ReactElement;
    saveHandler: () => void;
    saveButtonText?: string;
    saveButtonVariant?: string;
    isSaveButtonDisabled?: boolean;
    isSaving?: boolean;
    className?: string;
    testId?: string;
}

export const PopupModal: React.FC<PopupModalPropType> = ({
    closeButtonText = 'Cancel',
    closeHandler,
    headerLabel = '',
    isOpen,
    modalContent,
    saveHandler,
    saveButtonText = 'Save',
    isSaveButtonDisabled = false,
    isSaving = false,
    className = '',
    testId = '',
}) => (
    <div className="PopupModal">
        <Modal
            testId={testId || 'PopupModal'}
            title={headerLabel}
            isOpen={isOpen}
            onRequestClose={closeHandler}
            className={className}
            confirmDisabled={isSaveButtonDisabled}
            cancelTitle={closeButtonText}
            onConfirm={saveHandler}
            confirmTitle={
                isSaving ? (
                    <GlyphIcon name="inProgress" size={16} />
                ) : (
                    saveButtonText
                )
            }
        >
            {modalContent}
        </Modal>
    </div>
);