import React from 'react';
import PropTypes from 'prop-types';
import Journey from '../Journey'

const Cluster = ({clusters,alpha,orientation,lineProps,line}) => {
	var newClusters = [...clusters]
	var j = 0
	newClusters.forEach(cluster=>{
		cluster.startPoint = j
		cluster.points.forEach(point=>{
			point.index = j
			j = j+1
		})
		cluster.endPoint = j-1
		cluster.index = (cluster.startPoint + cluster.endPoint)/2
	})
	
	var m = newClusters.length
	var gap = 100/(j-1)
	var newPoints = []
	newClusters.forEach((cluster,i)=>{
		var limit0 = 100*i/(m-1)
		var limit1 = gap*(cluster.index)
		cluster.position = limit0 + alpha*(limit1-limit0)
		cluster.points.forEach(point=>{
			point.position = cluster.position + alpha*gap*(point.index - cluster.index)
			point.key = String(cluster.key) + ' ' + String(point.key)
			newPoints.push(point)
		})
		newPoints.push({
			key : 'Cluster_Label ' + String(cluster.key),
			position : cluster.position,
			renderSecondary : cluster.renderLabel,
			renderCircle : ()=><div></div>
		})
	})
	return <Journey
		orientation = {orientation}
		line={line}
		lineProps={lineProps}
		points={newPoints}
	/>
}

export default Cluster