import React from 'react';
import { Flex } from 'grid-styled';
import styled from 'styled-components';

const Ball = styled.div`
    width: ${props => props.active ? props.theme.wizard.stepMenuItem.ball.size.active : props.theme.wizard.stepMenuItem.ball.size.default};
    height: ${props => props.active ? props.theme.wizard.stepMenuItem.ball.size.active : props.theme.wizard.stepMenuItem.ball.size.default};
    background: ${props => props.active ? props.theme.wizard.stepMenuItem.ball.color.active : props.theme.wizard.stepMenuItem.ball.color.default};
    border-radius: 50%;
    display: flex;
    cursor: pointer;
`;

const Bar = styled.div`
    width: 2px;
    height: 100%;
    background: ${props => props.passed ? props.theme.wizard.stepMenuItem.bar.color.passed : props.theme.wizard.stepMenuItem.bar.color.default};
`;

const Title = styled.h1`
    font-weight: normal;
    color: ${props => props.theme.wizard.stepMenuItem.title.color};
    font-size: 14px;
    margin: 0px;
    position: relative;
    top: ${props => props.active ? '-4px' : '-7px'};
    cursor: pointer;
`;

class StepMenuItem extends React.Component{
    state = {
        active: false,
        passed: false,
        showBar: true
    }
    constructor(props){
        super(props);
    }

    get active(){
        return this.state.active;
    }

    set active(value){
        this.setState({active: value});
    }

    get passed(){
        return this.state.passed;
    }

    set passed(value){
        this.setState({passed: value});
    }

    get showBar(){
        return this.state.showBar;
    }

    set showBar(value){
        this.setState({showBar: value});
    }

    render(){
        return (
            <Flex>
                <Flex flexDirection='column' style={{height: this.props.theme.wizard.stepMenuItem.height}} alignItems='center' w={this.props.theme.wizard.stepMenuItem.ball.size.active}>
                    <Ball theme={this.props.theme} active={this.state.active} />
                    { this.state.showBar ? <Bar theme={this.props.theme} passed={this.state.passed} /> : null}
                </Flex>
                <Flex ml='10px'>
                    <Title theme={this.props.theme} active={this.state.active}>{this.props.title}</Title>
                </Flex>
            </Flex>
        );
    }
}

export default StepMenuItem;
