import React from "react";
import PlayButtonContainer from "../../../containers/app/timeline/PlayButtonContainer";
import {convertTickToPercentage} from "../../../util/timeline";

class TimelineControlsComponent extends React.Component {
    onTimelineClick(e) {
        const percentage = e.nativeEvent.offsetX / this.timeline.clientWidth;
        const tick = Math.floor(percentage * (this.props.lastSimulatedTick + 1));
        this.props.goToTick(tick);
    }

    render() {
        return (
            <div className="timeline-controls">
                <PlayButtonContainer/>
                <div
                    className="timeline"
                    ref={timeline => this.timeline = timeline}
                    onClick={this.onTimelineClick.bind(this)}
                >
                    <div
                        className="time-marker"
                        style={{left: convertTickToPercentage(this.props.currentTick, this.props.lastSimulatedTick)}}
                    />
                    {this.props.sectionTicks.map(sectionTick => (
                        <div
                            key={sectionTick}
                            className="section-marker"
                            style={{left: convertTickToPercentage(sectionTick, this.props.lastSimulatedTick)}}
                            title="Topology changes at this tick"
                        />
                    ))}
                </div>
            </div>
        );
    }
}

export default TimelineControlsComponent;