import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { HorizontalBar } from 'react-chartjs-2';

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

export default class ChartBarHorizontal extends Component {
	static propTypes = {
		data: PropTypes.oneOfType([
			PropTypes.object,
			PropTypes.func
		]).isRequired,
		options: PropTypes.object.isRequired,
		height: PropTypes.oneOfType([
			PropTypes.number,
			PropTypes.string
		]),
		title: PropTypes.string,
		subheading: PropTypes.string
	};

	static defaultProps = {
		height: null,
		title: null,
		subheading: null
	};

	render() {
		return (
			<div className={styles.Container}>
				{
					this.props.title && (
						<h5>
							{this.props.title}
						</h5>
					)
				}
				{
					this.props.subheading && (
						<p>
							{this.props.subheading}
						</p>
					)
				}
				<div style={{ height: this.props.height || 200 }}>
					<HorizontalBar
						data={this.props.data}
						options={this.props.options}
					/>
				</div>
			</div>
		);
	}
}
