import * as React from 'react';
import { StepPoint, StepPointLabel, STEP_POINT_STATE } from './styles';

const getRadius = state => {
	switch (state) {
		case STEP_POINT_STATE.ACTIVE: {
			return 8;
		}
		case STEP_POINT_STATE.INACTIVE: {
			return 7.5;
		}
		case STEP_POINT_STATE.CURRENT: {
			return 6;
		}
		default: return 9;
	}
}

const Step = ({ clickable, label, cx, cy, isActive, state, onClick, id, theme }) => (
	<>
		<StepPointLabel
			x={cx}
			y={cy - 24}
			textAnchor={'middle'}
			state={state}
			theme={theme}
		>
			{label}
		</StepPointLabel>
		<StepPoint
			state={isActive ? STEP_POINT_STATE.CURRENT : state}
			onClick={() => onClick(id)}
			cx={cx}
			cy={cy}
			r={getRadius(isActive ? STEP_POINT_STATE.CURRENT : state)}
			clickable={clickable}
			theme={theme}
		/>
	</>
);

export default Step;