import React, { Component } from 'react';

import Button from './Button.js';
import Popup from './Popup.js';
import globalData from '../GlobalData.js';

import './css/StopTitle.css';


class StopTitle extends Component {
    constructor(props) {
        super(props);
        this.popupElem = React.createRef();
    }

    showPopup = () => {
        this.popupElem.current.show();
    };

    hidePopup = () => {
        this.popupElem.current.hide();
    };

    setTrackA = () => {
        globalData.user.track = "A";
    };

    setTrackB = () => {
        globalData.user.track = "B";
    };

    updatePage = () => {
        globalData.currentPage.forceUpdate();
	}

    render() {
        return (
            <div id="stopTitle">
                <Popup ref={this.popupElem} className="">
                    <h3>Välj läge:</h3>
                    <ul>
                        <>
                            <li><Button onClick={[this.setTrackA, this.updatePage, this.hidePopup]}>{"Läge A"}</Button></li>
                            <li><Button onClick={[this.setTrackB, this.updatePage, this.hidePopup]}>{"Läge B"}</Button></li>
                        </>
                    </ul>
                </Popup>

                <h1>{this.props.stop.name !== undefined ?
                    this.props.stop.name
                    : "Hållplats saknas"
                }</h1>

                {this.props.stop.name !== undefined && this.props.stop.track !== undefined ?
                    <div>
                        <h3>
                            <span>{"Läge " + globalData.user.track}</span>
                        </h3>
                        <Button className="changeTrackBtn" onClick={[this.showPopup]}>Byt Läge</Button>
                    </div>
                    :
                    (this.props.stop.name !== undefined ?
                        <></>
                        : <h3>Vänligen aktivera platsåtkomst</h3>
                    )
                }
            </div>
        );
    }
}

export default StopTitle;