import React from "react";

export default class Step extends React.Component
{
	componentDidMount()
	{
		if(this.status === this.props.statuscode_id)
		{
			this.setState({ open: true });
		}
	}

	componentDidUpdate(prevProps, prevState)
	{
		if(this.props.statuscode_id !== prevProps.statuscode_id)
		{
			if(this.status === this.props.statuscode_id)
			{
				this.setState({ open: true });
			}
			else
			{
				this.setState({ open: false });	
			}
		}
	}

	_handle_onSwitch = () => 
	{
		const { statuscode_id } = this.props;
		this.setState({ open: !this.state.open ? true : false });
	}

	_renderHeader = (title) => 
	{
		const { statuscode_id } = this.props;
		const { open } = this.state;

		return (
			<div className="status_header" style={statuscode_id >= this.status ? { position: "relative", } : { position: "relative", cursor: "inherit" }} onClick={ statuscode_id >= this.status ? this._handle_onSwitch : () => {} }>
				{ this.status === statuscode_id && ( <div className="background"></div> )}
				<i className={`status_${ this.status } ${ statuscode_id < this.status ? "inactive" : "" }`}></i>
				<p>{ title }</p>
				{ statuscode_id >= this.status && (
					<div className="button_arrow">
						<div className={`icon ${ open ? "up" : "down" }`}></div>
					</div>
				) }
				{ this._renderHeaderButtons !== undefined && this._renderHeaderButtons() }
			</div>
		)
	}
}