<template>
  <div class="search">
      <input type="text" v-model="from.name">
      <button @click="searchStationFrom()">search</button>
      <br/>
      <input type="text" v-model="to.name">
      <button @click="searchStationTo()">search</button>
      <br/>
      <button @click="searchConnection()">find connection</button>
  </div>
  <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="station" >{{ leg.origin.name }}<br/>{{ toTime(leg.departure) }}<br/> Gleis {{ leg.departurePlatform }}</div>
        <div class="line">
          {{ leg.line?.product }}<br/>
          <div class="linename" :style="{backgroundColor:getLineColors(leg.line)[1], color:getLineColors(leg.line)[0]}">{{ leg.line?.name }}</div><br/>
          <p class="operator">{{ leg.line?.operator?.name }}</p></div>
        <div class="station" >{{ leg.destination.name }}<br/>{{ toTime(leg.arrival) }}<br/> Gleis {{ leg.arrivalPlatform }}</div>
        <hr/>
      </div>
    </li>
  </div>
</template>

<script>
  import axios from 'axios';

  const client = axios.create({
    baseURL: process.env.VUE_APP_BASE_URL
  });
  const timecolors = [
    {r:147, g:147, b:147, h:0},
    {r:156, g:151, b:146, h:1},
    {r:166, g:155, b:145, h:2},
    {r:175, g:163, b:149, h:3},
    {r:201, g:177, b:153, h:4},
    {r:235, g:212, b:165, h:5},
    {r:249, g:230, b:176, h:6},
    {r:250, g:249, b:196, h:7},
    {r:248, g:255, b:208, h:8},
    {r:237, g:255, b:226, h:9},
    {r:239, g:255, b:242, h:10},
    {r:231, g:255, b:251, h:11},
    {r:220, g:249, b:255, h:12},
    {r:220, g:236, b:255, h:13},
    {r:224, g:219, b:254, h:14},
    {r:243, g:209, b:254, h:15},
    {r:247, g:190, b:236, h:16},
    {r:243, g:175, b:203, h:17},
    {r:234, g:163, b:183, h:18},
    {r:226, g:163, b:190, h:19},
    {r:206, g:160, b:200, h:20},
    {r:178, g:153, b:190, h:21},
    {r:159, g:152, b:178, h:22},
    {r:146, g:146, b:167, h:23}]
  export default {
    name: 'HelloWorld',
    props: {
      msg: String
    },
    data() {
        return {
            from: {name:"", id:null},
            to: {name:"", id:null},
            connections: []
        }
    },
    methods: {
        searchStationFrom() {
          client.get("/searchStation", {params: {text: this.from.name}}).then(res => this.from = {name: res.data.name, id: res.data.id});
        },
        searchStationTo() {
          client.get("/searchStation", {params: {text: this.to.name}}).then(res => this.to = {name: res.data.name, id: res.data.id});
        },
        searchConnection() {
          if (this.from.id && this.to.id){
            client.get("/searchConnection", {params: {from: this.from.id, to:this.to.id}}).then(res => {this.connections = res.data;console.log(this.connections)});
          }
        },
        toDate(string){
          return new Date(string).toLocaleDateString("de-DE");
        },
        toTime(string){
          return new Date(string).toLocaleTimeString("de-DE", {timeStyle: 'short'});
        },
        getTimeColor(string){
          let date = new Date(string);
          let color1;
          let color2;
          let minutes;
          
          let i = 0;
          color1 = timecolors[i];
          color2 = timecolors[i+1];
          while (color1.h < date.getHours() && i+1 < timecolors.length){
            i++;
            color1 = timecolors[i];
            if (i+2 < timecolors.length) {
              color2 = timecolors[i+1];
            } else {
              color2 = timecolors[0];
            }
          }
          minutes = (date.getHours()-color1.h) * 60 + date.getMinutes();
          let maxMinutes = color2.h == 0 ? (24 - color1.h)*60 : (color2.h - color1.h)*60
          let r = (color2.r * minutes + color1.r * (maxMinutes-minutes))/maxMinutes;
          let g = (color2.g * minutes + color1.g * (maxMinutes-minutes))/maxMinutes;
          let b = (color2.r * minutes + color1.b * (maxMinutes-minutes))/maxMinutes;
          let color = "rgb("+r+","+g+","+b+")"
          return color;
        },
        getGradient(time1, time2){
          return "linear-gradient(0deg,"+this.getTimeColor(time2)+","+this.getTimeColor(time1)+")";
        },
        getLineColors(line){
          console.log(line);
          if (!line){
            return (['black', 'white']);
          } else if (line.productName === "STB"){
            return (['white', 'blue']);
          } else if (line.productName === "S"){
            return (['white', 'green']);
          } else if (line.productName === "RE" || line.productName === "RB"){
            return (['white', 'red']);
          } else if (line.productName === "IC" || line.productName === "ICE"){
            return (['red', 'white']);
          } else if (line.productName === "EC" || line.productName === "ECE"){
            return (['blue', 'white']);
          } else if (line.productName === "MEX"){
            return (['black', 'yellow']);
          } else {
            return (['black', 'white']);
          }
        }

    }
  }
</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;
  }
  .operator {
    font-size: 10px;
  }
  .results {
    display: inline-flex;
  }
  div {
    font-family:"Raveo-display-medium";
  }
  .walking > div {
    font-size: 12px;
  }
  .linename {
    width:100px;
    font-family:"Raveo-display-bold";
    align-content: center;
  }
  @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>
