import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import IDUtil from '../../../util/IDUtil';
import { createWordList } from '../../shared/WordCloudHelpers';

export default class WordCloud extends React.PureComponent {
    onClick = item => {
        this.props.onClick(item.id);
    };

    render() {
        const items = createWordList(
            this.props.words,
            this.props.searchTerm,
            this.props.size
        );

        const wordCloud = items.map(item => (
            <div
                key={item.id}
                onClick={this.onClick.bind(this, item)}
                title={item.score}
                style={{
                    fontSize:
                        3 +
                        // relative size
                        item.size * 10 +
                        // absolute size
                        Math.min(10, (item.score / 10) * 10) +
                        'px'
                }}
            >
                {item.label}
            </div>
        ));
        return (
            <div className={IDUtil.cssClassName('word-cloud')}>{wordCloud}</div>
        );
    }
}

WordCloud.propTypes = {
    // the raw words
    words: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
    mediaEvents: PropTypes.object.isRequired,
    size: PropTypes.number.isRequired,
    searchTerm: PropTypes.string.isRequired,
    onClick: PropTypes.func.isRequired
};