import React, { Component } from 'react';

import globalData from '../GlobalData.js';
import DisruptionButton from "./DisruptionButton.js";
import SelectUserButton from "./SelectUserButton.js"
import Popup from './Popup.js';
import Button from './Button.js';

import './css/NavigationDrawer.css';

import userIcon from '../img/user.svg';


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

    state = {
        open: false
    };

    toggle = () => {
        if (this.state.open)
            this.close();
        else
            this.open();
    };

    open = () => {
        this.setState({
            open: true
        });
    };

    close = () => {
        this.setState({
            open: false
        });
    };

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

    render() {
        return (
            <>
                <Popup ref={this.popupElem}>
                    <h3>Välj hållplats:</h3>
                    <ul>
                        <li><Button>Hållplats 1</Button></li>
                        <li><Button>Hållplats 2</Button></li>
                        <li><Button>Hållplats 3</Button></li>
                        <li><Button>Hållplats 4</Button></li>
                    </ul>
                </Popup>

                <div id="navDrawer" className={`${this.state.open ? "open" : ""}`}>
                    <header>
                        <img src={userIcon} alt="" />
                        <span>{globalData.user.name}</span>
                        <span>example@gmail.com</span>
                    </header>
                    <div id="navList">
                        <SelectUserButton path={"user1"} username="user1"/>
                        <SelectUserButton path={"user2"} username="user2"/>
                        <SelectUserButton path={"user3"} username="user3"/>
                        <SelectUserButton path={"user4"} username="user4"/>
                        <DisruptionButton path={"ex1"} onClick={[this.showPopup, this.close]} />
                        <DisruptionButton path={"ex2"} onClick={[this.showPopup, this.close]} />
                    </div>
                    <hr />
                    <span id="version">Projektgrupp 3 - Utmaning 7</span>
                </div>
                <div id="clickArea" className={`${this.state.open ? "" : "hidden"}`} onClick={this.close} />
            </>
        );
    }
}

export default NavigationDrawer;