<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>
          <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" >{{ 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() {
        console.log(process.env.VUE_APP_BASE_URL)
        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){
        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']);
        }
      },
      getOperatorLogo(operator){
        if (!operator){
          return (null);
        } else if (operator.id.startsWith("db-regio") || operator.id === "regionalverkehr-alb-bodensee"){
          return new URL('../assets/logos/dbregio.svg', import.meta.url);
        } else if (operator.id.startsWith("db-")){
          return new URL('../assets/logos/db.svg', import.meta.url);
        } else if (operator.id === "national-express"){
          return new URL('../assets/logos/nationalexpress.svg', import.meta.url);
        } else if (operator.id === "eurobahn"){
          return new URL('../assets/logos/eurobahn.svg', import.meta.url);
        } else if (operator.id === "schweizerische-bundesbahnen" || operator.id === "sbb-gmbh"){
          return new URL('../assets/logos/sbb.svg', import.meta.url);
        } else if (operator.id === "verkehrsbetriebe-zurich"){
          return new URL('../assets/logos/vbz.svg', import.meta.url);
        } else if (operator.id === "thurbo"){
          return new URL('../assets/logos/thurbo.svg', import.meta.url);
        } else if (operator.id === "arverio-baden-wurttemberg"){
          return new URL('../assets/logos/avi-bw.svg', import.meta.url);
        } else if (operator.id === "arverio-bayern"){
          return new URL('../assets/logos/avi-by.svg', import.meta.url);        
        } else if (operator.id === "euskotren"){
          return new URL('../assets/logos/euskotren.svg', import.meta.url);
        } else if (operator.id.startsWith("arriva")){
          return new URL('../assets/logos/arriva.svg', import.meta.url);        
        } else if (operator.id.startsWith("abellio")){
          return new URL('../assets/logos/abellio.png', import.meta.url);        
        } else if (operator.id === "nederlandse-spoorwegen"){
          return new URL('../assets/logos/ns.svg', import.meta.url);
        } else if (operator.id === "blauwnet"){
          return new URL('../assets/logos/blauwnet.png', import.meta.url);
        } else if (operator.id === "waldbahn-die-landerbahn-gmbh-dlb"){
          return new URL('../assets/logos/waldbahn.png', import.meta.url);
        } else if (operator.id === "ostdeutsche-eisenbahn-gmbh"){
          return new URL('../assets/logos/odeg.svg', import.meta.url);
        } else if (operator.id === "trenitalia"){
          return new URL('../assets/logos/trenitalia.svg', import.meta.url);
        } else if (operator.id === "osterreichische-bundesbahnen"){
          return new URL('../assets/logos/oebb.svg', import.meta.url);
        } else if (operator.id === "sj"){
          return new URL('../assets/logos/sj.svg', import.meta.url);
        } else if (operator.id === "vy"){
          return new URL('../assets/logos/vy.svg', import.meta.url);
        } else if (operator.id === "danische-staatsbahnen"){
          return new URL('../assets/logos/dsb.png', import.meta.url);
        } else if (operator.id === "skanetrafiken-oresundstag"){
          return new URL('../assets/logos/oresundtag.svg', import.meta.url);
        } else if (operator.id === "schweizerische-sudostbahn-sob"){
          return new URL('../assets/logos/sob.svg', import.meta.url);
        } else if (operator.id === "sncf"){
          return new URL('../assets/logos/sncf.svg', import.meta.url);
        } else if (operator.id === "mitteldeutsche-regiobahn"){
          return new URL('../assets/logos/mrb.svg', import.meta.url);
        } else if (operator.id === "cp"){
          return new URL('../assets/logos/cp-pt.svg', import.meta.url);
        } else if (operator.id === "renfe"){
          return new URL('../assets/logos/renfe.svg', import.meta.url);
        } else if (operator.id.startsWith("sncf-voyages")){
          return new URL('../assets/logos/sncf-voyageurs.svg', import.meta.url);
        } else if (operator.id === "pkp-intercity"){
          return new URL('../assets/logos/pkp-i.svg', import.meta.url);
        } else if (operator.id === "bayerische-regiobahn"){
          return new URL('../assets/logos/brb.svg', import.meta.url);
        } else if (operator.id === "postauto-schweiz"){
          return new URL('../assets/logos/postauto.svg', import.meta.url);
        } else if (operator.id === "lner-london-north-eastern-railway"){
          return new URL('../assets/logos/lner.svg', import.meta.url);
        } else if (operator.id === "eurostar"){
          return new URL('../assets/logos/eurostar.svg', import.meta.url);
        } else if (operator.id === "european-sleeper"){
          return new URL('../assets/logos/europesleep.svg', import.meta.url);
        } else if (operator.id === "ceske-drahy"){
          return new URL('../assets/logos/cd.svg', import.meta.url);
        } else if (operator.id === "mav"){
          return new URL('../assets/logos/mav.svg', import.meta.url);
        } else if (operator.id === "serbische-eisenbahnen-zeleznice-srbije"){
          return new URL('../assets/logos/zsrbije.png', import.meta.url);
        } else if (operator.id === "sncb"){
          return new URL('../assets/logos/sncb.svg', import.meta.url);
        } else if (operator.id === "cfl"){
          return new URL('../assets/logos/cfl.svg', import.meta.url);
        } else if (operator.id === "s-bahn-berlin"){
          return new URL('../assets/logos/sbahnberlin.svg', import.meta.url);
        } else if (operator.id === "rhatische-bahn"){
          return new URL('../assets/logos/rhb.svg', import.meta.url);
        } else if (operator.id === "matterhorn-gotthard-bahn-bvz"){
          return new URL('../assets/logos/mgb.svg', import.meta.url);
        } else if (operator.id === "s-bahn-hamburg"){
          return new URL('../assets/logos/sbahnhamburg.png', import.meta.url);
        } else if (operator.id === "akn-eisenbahn-gmbh"){
          return new URL('../assets/logos/akn.svg', import.meta.url);
        } else if (operator.id === "wurttembergische-eisenbahn-gesellschaft-mbh"){
          return new URL('../assets/logos/weg.svg', import.meta.url);
        } else if (operator.id === "wynental-und-suhrental-bahn" || operator.id === "bdwm-transport"){
          return new URL('../assets/logos/ava.svg', import.meta.url);
        } else if (operator.id === "appenzeller-bahnen"){
          return new URL('../assets/logos/ab.svg', import.meta.url);
        } else if (operator.id === "agilis"){
          return new URL('../assets/logos/agilis.svg', import.meta.url);
        } else if (operator.id === "hzpp"){
          return new URL('../assets/logos/hzpp.png', import.meta.url);
        } else if (operator.id === "obb-postbus"){
          return new URL('../assets/logos/oebb-postbus.png', import.meta.url);
        } else if (operator.id === "snalltaget"){
          return new URL('../assets/logos/snalltaget.svg', import.meta.url);
        } else if (operator.id === "schwabische-alb-bahn"){
          return new URL('../assets/logos/sab.svg', import.meta.url);
        } else if (operator.id.startsWith("sweg-bahn")){
          return new URL('../assets/logos/sweg.svg', import.meta.url);
        } else if (operator.id === "ferrocarils-de-la-generalitat-de-catalunya"){
          return new URL('../assets/logos/fgc.svg', import.meta.url);
        } else if (operator.id === "albtal-verkehrs-gesellschaft-mbh"){
          return new URL('../assets/logos/avg.svg', import.meta.url);
        } else if (operator.id === "westfalenbahn"){
          return new URL('../assets/logos/wfb.png', import.meta.url);
        } else if (operator.id === "coras-iompair-eireann"){
          return new URL('../assets/logos/cie.svg', import.meta.url);
        } else if (operator.id === "avanti-west-coast"){
          return new URL('../assets/logos/avantiwc.svg', import.meta.url);
        } else if (operator.id === "koleje-dolnoslaskie"){
          return new URL('../assets/logos/kolejed.svg', import.meta.url);
        } else if (operator.id === "trilex-express-die-landerbahn-gmbh-dlb"){
          return new URL('../assets/logos/trilex.png', import.meta.url);
        } else if (operator.id === "polregio"){
          return new URL('../assets/logos/polregio.svg', import.meta.url);
        } else if (operator.id === "bayerische-zugspitzbahn"){
          return new URL('../assets/logos/zugspitze.svg', import.meta.url);
        } else if (operator.id === "rigi-bahnen"){
          return new URL('../assets/logos/rigi.svg', import.meta.url);
        } else if (operator.id === "regionalverkehr-bern-solothurn"){
          return new URL('../assets/logos/rbs.svg', import.meta.url);
        } else if (operator.id === "zentralbahn"){
          return new URL('../assets/logos/zb.svg', import.meta.url);
        } else if (operator.id === "bls-ag"){
          return new URL('../assets/logos/bernmobil.svg', import.meta.url);
        } else if (operator.id === "westbahn"){
          return new URL('../assets/logos/westbahn.svg', import.meta.url);
        } else if (operator.id === "northern"){
          return new URL('../assets/logos/northern.svg', import.meta.url);
        } else if (operator.id === "south-eastern"){
          return new URL('../assets/logos/southeastern.svg', import.meta.url);
        } else if (operator.id === "hull-trains"){
          return new URL('../assets/logos/hulltrains.svg', import.meta.url);
        } else if (operator.id === "schweizerische-bodensee-schiffahrtsgesellschaft"){
          return new URL('../assets/logos/bodenseech.png', import.meta.url);
        } else if (operator.id === "bodensee-schiffsbetriebe"){
          return new URL('../assets/logos/bsb.svg', import.meta.url);
        } else if (operator.id === "regiojet"){
          return new URL('../assets/logos/regiojet.svg', import.meta.url);
        } else if (operator.id === "edzards-reisen"){
          return new URL('../assets/logos/edzards.svg', import.meta.url);
        } else if (operator.id === "vlexx"){
          return new URL('../assets/logos/vlexx.png', import.meta.url);
        } else if (operator.id === "nordwestbahn"){
          return new URL('../assets/logos/nordwestbahn.svg', import.meta.url);
        } else if (operator.id === "caledonian-macbrayne-ferries"){
          return new URL('../assets/logos/caledonian-macbrayne.svg', import.meta.url);
        } else if (operator.id === "caledonian-sleeper"){
          return new URL('../assets/logos/caledonian-sleeper.png', import.meta.url);
        } else if (operator.id === "mecklenburgische-baderbahn-molli"){
          return new URL('../assets/logos/molli.svg', import.meta.url);
        } else {
          console.log(operator.id);
          return (null);
        }
      }
    }
  }
</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;
    margin-top:10px;
    margin-bottom:10px
  }

  .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>
