import React from 'react';

export enum AlertType {
    DANGER= 'danger',
    WARNING= 'warning',
    INFO= 'info'
}
interface IProps {
    className?: string;
    message: string;
    type: AlertType;
    children: JSX.Element | JSX.Element[];
    show?: boolean;
    showAlertLabel?: boolean;
}
const defaultProps: Partial<IProps> = {
    className: '',
    show: false,
    showAlertLabel: false
};

export default function AlertMessage(props: IProps) {
    if (!props.show) { return null; }
    const getAlertLabel = (): string => {
        if (props.type === AlertType.DANGER) { return 'Error'; }
        if (props.type === AlertType.WARNING) { return 'Warning'; }
        if (props.type === AlertType.INFO) { return 'Info'; }
    };

    if (props.message && props.children) {
        // tslint:disable-next-line:no-console
        console.warn('Warning: On AlertMessage component, when we have both message attr and children elements, children elements will be rendered.');
    }

    return(
        <div className={`alert alert-${props.type} alert-w-icon ${props.className}`} role="alert">
            <span className="icon-warning alert-icon" aria-hidden="true"/>
            {props.children ? props.children : (<>
                {props.showAlertLabel && (<><strong>{getAlertLabel()}</strong>: </>)}
                {props.message}
            </>)}
        </div>
    );
}
AlertMessage.defaultProps = defaultProps;
