import React, {Component} from 'react';
import PropTypes from 'prop-types';
import Translate from '../Translate';
import Icon from '../Icon';
import './styles.scss';

class Hint extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isVisible: this.props.isVisible,
        };

        this.toggleHint = this.toggleHint.bind(this);
    }

    componentDidMount() {
        document.body.addEventListener('click', this.clickHandler);
    }

    componentWillReceiveProps(changes) {
        if (changes.isVisible !== this.state.isVisible) {
            this.setState({
                isVisible: changes.isVisible,
            });
        }
    }

    componentWillUnmount() {
        document.body.removeEventListener('click', this.clickHandler);
    }

    clickHandler = () => {
        this.setState({
            isVisible: false,
        });
    };

    toggleHint() {
        this.setState({
            isVisible: !this.state.isVisible,
        });
    }

    render() {
        const icon = this.props.withIcon && (
            <Icon
                name="question"
                size="small"
                color="gray-dark"
                classNames="Hint__target"
            />
        );

        const content = this.state.isVisible && (
            <div className="Hint__block">
                <div className="Hint__content">
                    <div className="Hint__content-block">
                        <Translate tag={this.props.message} />
                    </div>
                </div>
            </div>
        );

        return (
            <div
                role="presentation"
                className="Hint"
                onClick={() => this.toggleHint()}
            >
                {icon}
                {content}
            </div>
        );
    }
}

Hint.propTypes = {
    message: PropTypes.string.isRequired,
    isVisible: PropTypes.bool,
    withIcon: PropTypes.bool,
};

Hint.defaultProps = {
    isVisible: false,
    withIcon: true,
};

export default Hint;