import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';

const CircleOuterWrap = styled.div`${({ align, orientation, position, lineLength, lineWidth ,state :{ wrap, primaryComp, circle}})=>`
	position : absolute;
	${(()=>{
		if(wrap && primaryComp && circle){
			if(orientation=='horizontal'){
				const shift = align=='side' ? circle.scrollWidth : wrap.scrollWidth
				return `top : ${-1*(primaryComp.scrollHeight+(circle.scrollHeight-lineWidth)/2)}px;
				left : calc(${position}% - ${shift/2}px);
				`
			}
			else{
				const shift = align=='side' ? circle.scrollHeight : wrap.scrollHeight
				return `right : ${-1*(primaryComp.scrollWidth+(circle.scrollWidth-lineWidth)/2)}px;
				top : calc(${position}% - ${shift/2}px);
				`
			}
		}
	})()}
`}`

const CircleInnerWrap = styled.div`${({orientation, align})=>`
	display : flex;
	justify-content : center;
	align-items : ${align ? align : 'center'};
	flex-direction : ${orientation=='horizontal'?'column;':'row-reverse;'}
`}`

class Point extends React.Component{
	
	state = {
		wrap : null, primaryComp : null, circle : null
	}

	wrapRef = el => {
		if(el){
			this.setState({ wrap :el })
		}
	}

	primaryCompRef = el => {
		if(el){
			this.setState({ primaryComp :el })
		}
	}

	circleRef = el => {
		if(el){
			this.setState({ circle : el })
		}
	}

	render(){
		const { el:{ position, align, renderCircle, renderPrimary=null , renderSecondary=null, onClick, onMouseOver },
		 lineLength, lineWidth, orientation } = this.props
		return(
			<CircleOuterWrap
				position={position}
				lineWidth={lineWidth}
				lineLength={lineLength}
				state={this.state}
				orientation={orientation}
				align={align}
			>
				<div ref={this.wrapRef} onClick={onClick} onMouseOver={onMouseOver}>
					<CircleInnerWrap orientation={orientation} align={align}>
						<div key='primary' ref={this.primaryCompRef}>{renderPrimary}</div>
						<div key='circle' ref={this.circleRef}>{renderCircle}</div>
						{renderSecondary}
					</CircleInnerWrap>
				</div>
			</CircleOuterWrap>
		)
	}



}

export default class Journey extends React.Component{
	
	state = {
		lineLength : 0, lineWidth : 0
	}

	lineRef = el => {
		if(el){
			const lineLength = this.props.orientation=='horizontal' ? el.scrollWidth : el.scrollHeight
			const lineWidth = this.props.orientation=='horizontal' ? el.scrollHeight : el.scrollWidth
			this.setState({ lineLength , lineWidth })
		}
	}



	render(){
		const Line = this.props.line
		return(
			<div ref={this.lineRef} style={{'position':'relative'}} className={(this.props.orientation=='vertical')?"inlineBlock":"auto"}>
				<Line ref={this.lineCompRef} {...this.props.lineProps}>
					{
						this.state.lineLength && this.props.points.map((el,k)=>(
							<Point 
								key={el.key}
								el={el}
								orientation={this.props.orientation}
								lineLength={this.state.lineLength}
								lineWidth={this.state.lineWidth}
							/>
						)) || null
					}
				</Line>
			</div>
		)
	}
}