import React from 'react';
import styled from 'styled-components'

class Middle extends React.Component{
	
	state = { width : 0 }

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

	render(){
		const { renderLine, renderCircle } = this.props
		return(
			<div style={{ position:'relative' , width:`${this.state.width}px` , display:'flex', alignItems:'center', justifyContent:'center', height:'100%' }}>
				{renderLine}
				<div style={{ position:'absolute', top:'0px' }} ref={this.circleRef}>
					{renderCircle}
				</div>
			</div>
		)
	}

}

const Step = ({key,renderLeft=null,renderRight=null,renderLine,renderCircle},index) => {
	return(
		<tr key={key}>
      <td key='left' className='left'>
      	{renderLeft && <div className='inner'>{renderLeft}</div>}
      </td>
  	  <td key='middle' className='middle'>
  	  	<Middle
  		renderLine={renderLine}
  		renderCircle={renderCircle}
  	  	/>
  	  </td>
      <td key='right' className='right'>
      	{renderRight && <div className='inner'>{renderRight}</div>}
      </td>
    </tr>
	)
}

const Styles = styled.div`
  table{
  	border-collapse : collapse;
  }
  tr, td{
    padding: 0px;
  }
  .left, .middle, .right{
  	height : 0px;
  }
  .inner{
  	height : 100%;
  	display : flex;
  	align-items : top;
  }
  .left{
  	.inner{
  		justify-content : flex-end;
  	}
  }
`

const Stepper = ({steps}) => {
	return(
		<Styles>
      <table>
       <tbody>
      	{steps.map(Step)}
       </tbody>
      </table>
    </Styles>
	)
}

export default Stepper