import * as React from 'react';
import { SERVER_MESSAGE_TYPE } from '../../../utils/global';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons/faExclamationTriangle';
import { faCheckCircle } from '@fortawesome/free-solid-svg-icons/faCheckCircle';
import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
import { IconProp } from '@fortawesome/fontawesome-svg-core';
import ServerMessageContainer, {
	ServerMessageProps
} from '../../../containers/server-message/ServerMessage';
import {
	serverMessageStyle,
	leftIconStyle,
	textStyle,
	rightIconStyle
} from './serverMessageOne.style';

library.add(faExclamationTriangle, faTimes, faCheckCircle);

const ServerMessageOne = (props: ServerMessageProps) => {
	if (!props.serverMessage || !props.serverMessage.message) return null;
	let leftIcon: IconProp =
		props.serverMessage.type === SERVER_MESSAGE_TYPE.SUCCESS
			? 'check-circle'
			: 'exclamation-triangle';
	return (
		<ServerMessageContainer
			{...props}
			render={() => {
				return (
					<div className={serverMessageStyle(props.palette, props.serverMessage.type)}>
						<div className={leftIconStyle(props.palette)}>
							<FontAwesomeIcon icon={leftIcon} />
						</div>
						<div className={textStyle()}>{props.serverMessage.message}</div>
						<div className={rightIconStyle(props.palette)} onClick={props.removeErrorMessage}>
							<FontAwesomeIcon icon="times" className={leftIconStyle(props.palette)} />
						</div>
					</div>
				);
			}}
		/>
	);
};

export default ServerMessageOne;