import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Util from './util';

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

export default class SparklineBar extends Component {
	static propTypes = {
		data: PropTypes.array.isRequired,
		color: PropTypes.string,
		fontSize: PropTypes.number
	};

	static defaultProps = {
		color: '#0099CC',
		fontSize: 30
	};

	constructor(props) {
		super(props);

		this.state = {
			data: Util.scale(props.data)
		};
	}

	render() {
		return (
			<span
				className={`${styles.Sparkline} Bar`}
				style={{
					fontSize: `${this.props.fontSize}px`,
					lineHeight: `${this.props.fontSize}px`,
					color: this.props.color
				}}
			>
				{`{${this.state.data.join(',')}}`}
			</span>
		);
	}
}
