<template>
  <div class="results">
    <li class="journey" v-for="connection in this.connections" :key="connections.indexOf(connection)">
      <h2>{{ toTime(connection.legs[0].departure) }} - {{ toTime(connection.legs[connection.legs.length -1].arrival) }}</h2>
      <div class="leg" v-for="leg in connection.legs" :key="connection.legs.indexOf(leg)" :class="leg.walking ? 'walking' : null" :style="{backgroundColor:getTimeColor(leg.arrival), background:getGradient(leg.departure, leg.arrival)}" >
        <div class="linename" >
          <div class="linenameinner" :style="{backgroundColor:getLineColors(leg.line)[1], color:getLineColors(leg.line)[0]}">{{ leg.line?.name }}</div>
          <div class="linenameinner" :style="{backgroundColor:getLineColors(leg.line)[1], color:getLineColors(leg.line)[0]}">{{ leg.direction }}</div>
          </div>
        <div class="lineinfo">
          <div class="station" v-if="leg.departurePlatform">{{ leg.origin.name }}<br/>{{ toTime(leg.departure) }}<br/> Gleis {{ leg.departurePlatform }}</div>
          <div class="line">
            <p class="operator" v-if="!getOperatorLogo(leg.line?.operator)">{{ leg.line?.operator?.name }}</p>
            <img class="operator-logo" :src="getOperatorLogo(leg.line?.operator)" v-if="getOperatorLogo(leg.line?.operator)">
          </div>
          <div class="station" v-if="leg.arrivalPlatform">{{ leg.destination.name }}<br/>{{ toTime(leg.arrival) }}<br/> Gleis {{ leg.arrivalPlatform }}</div>
        </div>
        <hr/>
      </div>
    </li>
  </div>
</template>

<script>
  import timefunctions from '@/lib/time.js'
  import routefunctions from '@/lib/routes.js'
  import operatorfunctions from '@/lib/operators.js'

  export default {
    name: 'RoutingBahn',
    props: {
      connections: Array
    },
    components: {
    },
    data() {
        return {
            from: {name:"", id:null},
            to: {name:"", id:null},
        }
    },
    methods: {
      toDate(string){
        return new Date(string).toLocaleDateString("de-DE");
      },
      toTime(string){
        return new Date(string).toLocaleTimeString("de-DE", {timeStyle: 'short'});
      },
      getGradient(time1, time2){
        return "linear-gradient(0deg,"+timefunctions.getTimeColor(time2)+","+timefunctions.getTimeColor(time1)+")";
      },
      getTimeColor(string) {
        timefunctions.getTimeColor(string)
      },
      getLineColors(line){
        return routefunctions.getLineColors(line)
      },
      getOperatorLogo(line){
        return operatorfunctions.getOperatorLogo(line)
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h3 {
    margin: 40px 0 0;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
  .journey {
    margin: 40px;
    width: 450px;
  }
  .station {
    margin: 4px;
    display: inline-block;
    width:150px;
    vertical-align: text-top;
  }
  .line {
    margin: 4px;
    display: inline-block;
    width:100px;
    vertical-align: text-top;
    align-content: center;
  }
  .linename {
    width:100px;
    font-family:"Raveo-display-bold";
    align-content: center;
    display:inline-flex;
    width:max-content;
  }
  .linenameinner {
    padding-left: 10px;
    padding-right: 10px;
    margin: 15px;
  }

  .operator {
    font-size: 10px;
  }
  .operator-logo {
    max-width:100px;
    max-height:20px;
  }
  .results {
    display: inline-flex;
  }
  div {
    font-family:"Raveo-display-medium";
  }
  .walking > div {
    font-size: 12px;
  }
  @font-face {
    font-family: "Raveo-display-bold";
    src: url("../assets/Raveo Display Bold.woff2") format("opentype"); 
  }
  @font-face {
    font-family: "Raveo-display-medium";
    src: url("../assets/Raveo Display Medium.woff2") format("opentype"); 
  }
</style>
