import * as React from 'react';

import {
    COMPONENT_MODE_CUSTOM,
    COMPONENT_MODE_EMPTY,
    COMPONENT_MODE_ERROR,
    COMPONENT_MODE_LOADING
} from '../mmui-react-component';

/**
 * React Component to Overlay a parent Component with a mode indicator.
 * make sure when initiating the ComponentModeWindow instance, provide attributes: mode, hasEmptyMode, hasErrorMode, loadingGraphicUrl
 */
export interface MmuiBlueComponentModeProps {
    mode?: any;
    customIconClass?: string;
    customMessage?: string;
}

export const MmuiBlueComponentMode: React.FC<MmuiBlueComponentModeProps> = ({mode, customIconClass, customMessage}: MmuiBlueComponentModeProps) => {

    let content = null;

    if (mode === COMPONENT_MODE_CUSTOM) {

        let customClasses = "icon-xl mmui-mb-2";
        if(customIconClass){
            customClasses = customClasses + ` ${customIconClass}`;
        }

        content = (
            <div className="mmui-blue-component-mode">
                <span className={customClasses}></span>
                <p>{customMessage}</p>
            </div>
        );
    } else if (mode === COMPONENT_MODE_LOADING) {
        content = (
            <div className="mmui-blue-component-mode">
                <span className="mm-dots-loading-xl" role="img" aria-label="MassMutual Logo"></span>
            </div>
        );
    } else if (mode === COMPONENT_MODE_EMPTY) {
        content = (
            <div className="mmui-blue-component-mode">
                <span className="icon-search icon-xl mmui-mb-2"></span>
                <p>No data available based on your selections</p>
                <p className="copy-sm">Try modifying any conflicting selections or reducing selections</p>
            </div>
        );
    } else if (mode === COMPONENT_MODE_ERROR) {
        content = (
            <div className="mmui-blue-component-mode">
                <span className="icon-error-warning icon-xl mmui-mb-2"></span>
                <p>Something went wrong on our end</p>
                <p className="copy-sm">Try again with some changes</p>
            </div>
        );
    }

    return content;
}