import React, { Component } from 'react';
import { Link } from 'react-router-dom';

import './css/TrafficInfo.css';

import busIcon from '../img/bus.svg';
import warningIcon from '../img/warning.svg';

class TrafficEntry extends Component {
    state = {
        expanded: false
    };

    toggle = () => {
        if (this.state.expanded)
            this.collapse();
        else
            this.expand();
    };

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

    collapse = () => {
        this.setState({
            expanded: false
        });
    };

    render() {
        let trafficInfo = this.props.departure.trafficInfo;
        let lineInterference = trafficInfo !== "" && trafficInfo !== null && trafficInfo !== undefined;

        return (
            <div className="trafficEntry">
                <div>
                    <div className="timeColumn">
                        {!lineInterference &&
                            <span>{this.props.departure.originalTime}</span>
                        }
                        {lineInterference &&
                            <>
                                <div style={{display: "flex", flexDirection: "column"}}>
                                    <span style={{color: "red", fontWeight: "bold"}}>{this.props.departure.newTime}</span>
                                    <span style={{textDecoration: "line-through"}}>{this.props.departure.originalTime}</span>
                                </div>
                                <img src={warningIcon} alt=""></img>
                            </>
                        }
                    </div>
                    <div className="lineColumn">
                        <div>
                            <span className="lineName">{this.props.departure.lineName}</span>
                            <img src={busIcon} alt=""></img>
                            <span className="destination">{"Mot " + this.props.departure.finalStop}</span>
                        </div>
                        {lineInterference &&
                            <div className="infoWrapper" onClick={this.toggle}>
                                <p className={`${this.state.expanded ? "expanded" : ""}`}>{trafficInfo}</p>
                                <span style={{display: (this.state.expanded ? "none" : "block") }}><u>Visa mer</u></span>
                            </div>
                        }
                    </div>
                </div>

                {lineInterference &&
                    <Link to={
                        { pathname: "/travel"
                        , to: this.props.departure.finalStop
                        }
                    }>Hitta annan resväg</Link>
                }
            </div>
        );
    }
}

export default TrafficEntry;