import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
	Message as SemanticMessage
} from 'semantic-ui-react';

import * as styles from './Style.less';

export default class Message extends Component {
	static propTypes = {
		content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
		icon: PropTypes.string,
		type: PropTypes.string
	};

	static defaultProps = {
		icon: null,
		type: 'success'
	};

	constructor(props) {
		super(props);

		this.state = {
			visible: true
		};
	}

	getIcon() {
		if (this.props.icon) {
			return this.props.icon;
		}

		let icon = '';

		switch (this.props.type) {
		case 'error':
			icon = 'exclamation circle';
			break;
		case 'info':
			icon = 'info circle';
			break;
		case 'success':
		default:
			icon = 'check circle';
			break;
		case 'warning':
			icon = 'exclamation triangle';
			break;
		}

		return icon;
	}

	hide() {
		this.setState({
			visible: false
		});
	}

	render() {
		return (
			<SemanticMessage
				className={styles.Message}
				content={this.props.content}
				icon={this.getIcon()}
				onDismiss={() => this.hide()}
				hidden={!this.state.visible}
				{...{ [this.props.type]: true }}
			/>
		);
	}
}
