<app>
<h2>{ props.title }</h2>
<div id="radar">

	<!-- Use the component -->

	<svg 
	 is="polygraph"
     stats={ state.stats } />


		<!-- controls -->

		<div>
		<div each={ (stat, index) in state.stats }>
		 <label>{ stat.label }</label>
		  <input type="range"
		  onchange={ changeValue }
		  min="0"
	      max="100"
          data-index={ index }
          value={ stat.value }>
		<span>{ stat.value }</span>
		<button onclick={ remove } class="remove" value={ index }>X</button>
		</div>

		<!-- add item -->
		<form id="add">
		<input type="text"
		  name="newlabel"
	      value={ state.newLabel }
	      oninput={ inputStat }>
		<button onclick={ add }>Add a Stat</button>
		</form>
		</div>
</div>

<script>
	export default {
		state: {
			newLabel: '',
			stats: []
		},
		onBeforeMount(props, state) {
			state.stats = props.stats
		},
		add(e) {
			// TODO
				},
		remove(stat) {
			// TODO
		},
		inputStat(e) {
			this.state.newLabel = e.target.value
		},
		changeValue(e) {
			this.state.stats[e.target.dataset.index].value = e.target.value
			this.update()
		}
	}
</script>
</app>
