import { createElement as h } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'

// Round upward to the next group of ten
const round = (num) => Math.ceil(num / 10) * 10

const max = (items) => round(Math.max.apply(Math, items))
const mid = (items) => max(items) / 2
const min = () => 0

const percentage = (amount, max) => (amount / max) * 100

const Row = (props) => {

	return (
		h('div', {
			className: classNames({
				'barChart__row': true,
				'barChart__row--top': props.position === 'top',
				'barChart__row--middle': props.position === 'middle',
				'barChart__row--bottom': props.position === 'bottom',
				'color-light': true
			})
		}, props.children)
	)

}

const Column = (props) => {

	return (
		h('div', {
			className: classNames({
				barChart__column: true,
				active: props.active
			}),
			onMouseEnter: props.onEnter,
			onMouseLeave: props.onLeave
		},
			h('div', {
				'className': 'barChart__bar color-black',
				'style': { '--size': props.size },
				'data-label': props.label
			})
		)
	)

}

const PresentationBarChart = (props) => {

	return (
		h('div', { className: 'barChart' },
			h('div', { className: 'barChart__axis' },
				h(Row, { position: 'top' }, props.items.length === 0 ? '' : max(props.items)),
				h(Row, { position: 'middle' }, props.items.length === 0 ? '' : mid(props.items)),
				h(Row, { position: 'bottom' }, props.items.length === 0 ? '' : min())
			),
			props.items.map((item, index) => (
				h(Column, {
					key: index,
					active: props.active === index,
					size: `${ percentage(item, max(props.items)) }%`,
					onEnter: () => props.onEnter(index),
					onLeave: () => props.onLeave(index),
					label: item
				})
			))
		)
	)

}

PresentationBarChart.propTypes = {
	items: PropTypes.arrayOf(PropTypes.number).isRequired,
	onEnter: PropTypes.func.isRequired,
	onLeave: PropTypes.func.isRequired
}

export default PresentationBarChart
@@ -1090,32 +1090,74 @@
 = (props) =%3E %7B%0A%0A
+%09const hasItems = props.items.length %3E 0%0A%0A
 %09return (%0A%09%09h('d
@@ -1142,32 +1142,32 @@
  %3E 0%0A%0A%09return (%0A
-
 %09%09h('div', %7B cla
@@ -1269,39 +1269,27 @@
  %7D, 
-props.items.length === 0 ? '' :
+hasItems === true ?
  max
@@ -1293,32 +1293,37 @@
 max(props.items)
+ : ''
 ),%0A%09%09%09%09h(Row, %7B 
@@ -1348,39 +1348,27 @@
  %7D, 
-props.items.length === 0 ? '' :
+hasItems === true ?
  mid
@@ -1380,16 +1380,21 @@
 s.items)
+ : ''
 ),%0A%09%09%09%09h
@@ -1427,45 +1427,38 @@
  %7D, 
-props.items.length === 0 ? '' :
+hasItems === true ?
  min()
+ : ''
 )%0A%09%09

Use variable to check if it has items