<template>
  <q-page>
    <q-item class="flex column">
      <q-item-section>Recherche d'un système</q-item-section>
      <q-space />
      <q-item-section>
        <q-input label="Nom du système" v-model="systemName" />
        <q-item class="flex flex-center">
        <q-btn @click="searchSystem">
          <q-icon name="fas fa-search"/>
        </q-btn>
        </q-item>
      </q-item-section>
    </q-item>
    <div class="q-pa-md flex flex-center" v-if="loading">
      <q-circular-progress
        indeterminate
        size="50px"
        color="orange"
        class="q-ma-md"
      />
    </div>
    <q-item v-if="system && factions && vaisseauInSystem" class="flex column q-gutter-md">
      <q-item-label>Nom du système : <strong>{{ system.name }}</strong></q-item-label>
      <q-item-label>Faction dominante : <strong>{{ factions.controllingFaction.name }}</strong></q-item-label>
      <div>
        <q-item-label>
          <strong>Trafic dans le système</strong><br />
          Vaisseaux vus depuis 1 jour :
          <q-item-label style="padding-left: 10px" v-for="vaisseau in vaisseauInSystem" :key="vaisseau">{{ vaisseau }}</q-item-label>
        </q-item-label>
      </div>
      <q-expansion-item
        expand-separator
        dense
        dense-toggle
        icon="fas fa-dice-d20"
        :label="'Stations ' + system.stations.length"
      >
        <q-list v-for="station in system.stations" :key="station.id">
          <q-card style="padding: 10px; margin: 5px" @click="toStation(system.name, station.marketId)">
            <ImgAllegiance :allegiance="station.allegiance" />
            <div style="padding: 10px; margin: -75px 5px 5px;">
              Nom : {{ station.name }}<br />
              Type : {{ station.type }}<br />
              Allégeance : {{ station.allegiance }}<br/>
              <div v-if="station.controllingFaction">Faction dirigeante : {{ station.controllingFaction.name }}<br/></div>
              Distance de l'astre : {{ station.distanceToArrival}} sl<br />
              <div v-if="station.economy">Économie : {{ getEconomie(station.economy) }}<br /></div>
              <div v-if="station.secondEconomy">Seconde Économie : {{ getEconomie(station.secondEconomy) }}<br /></div>
              <div v-if="station.governement">Gouvernement : {{ getGovernement(station.government) }}<br /></div>
              Marché : <q-icon :name="station.haveMarket ? 'fas fa-check' : 'fas fa-times'" :color="station.haveMarket ? 'green' : 'red' "/><br />
              Chantier naval : <q-icon :name="station.haveShipyard ? 'fas fa-check' : 'fas fa-times'" :color="station.haveShipyard ? 'green' : 'red' "/><br />
              Équipements : <q-icon :name="station.haveOutfitting ? 'fas fa-check' : 'fas fa-times'" :color="station.haveOutfitting ? 'green' : 'red' "/><br />
            <br />
            Autres services :
            <q-item-label v-for="service in station.otherServices" :key="service" style="margin-left: 10px">
              {{ getServices(service) }}
            </q-item-label>
            </div>
          </q-card>
        </q-list>
      </q-expansion-item>
      <q-expansion-item
        expand-separator
        dense
        dense-toggle
        icon="fas fa-flag"
        :label="'Factions ' + factions.factions.length"
      >
        <q-list v-for="faction in factions.factions" :key="faction.id">
          <q-card style="padding: 10px; margin: 5px">
            Nom : {{ faction.name }}<br />
            Allégeance : {{ faction.allegiance }}<br />
            Influence : {{ (faction.influence * 100).toFixed(2) }}%<br />
            Gouvernement : {{ getGovernement(faction.government) }}<br />
          </q-card>
        </q-list>
      </q-expansion-item>
    </q-item>
    <q-card v-if="notFound">
      <q-card-section>
        Système inconnu
      </q-card-section>
    </q-card>
  </q-page>
</template>

<script>
import axios from 'axios'
import { getEconomie, getGovernement, getServices } from './utils.js'
import ImgAllegiance from 'components/ImgAllegiance'

export default {
  name: 'system',
  components: { ImgAllegiance },
  props: {
    systemNameProps: String
  },
  data () {
    return {
      loading: false,
      systemName: '',
      system: null,
      notFound: false,
      trafic: null,
      vaisseauInSystem: [],
      factions: null
    }
  },
  watch: {
    systemNameProps: {
      immediate: false,
      handler (props) {
        if (props !== undefined) {
          this.systemName = props
          this.searchSystem()
        }
      }
    }
  },
  methods: {
    async searchSystem () {
      this.loading = true
      this.notFound = false
      this.system = null
      await axios.get('https://www.edsm.net/api-system-v1/stations?systemName=' + this.systemName)
        .then(response => {
          if (response.data.name !== undefined) {
            this.system = response.data
            axios.get('https://www.edsm.net/api-system-v1/traffic?systemName=' + this.systemName)
              .then(response => {
                this.trafic = response.data
                this.vaisseauInSystem = []
                this.getBreakDown(this.trafic, this.vaisseauInSystem)
              })
              .catch(error => {
                this.loading = false
                this.$q.notify('Une erreur est survenue', error)
              })
            axios.get('https://www.edsm.net/api-system-v1/factions?systemName=' + this.systemName)
              .then(response => {
                this.factions = response.data
              })
              .catch(error => {
                this.loading = false
                this.$q.notify('Une erreur est survenue', error)
              })
          } else {
            this.notFound = true
          }
          this.loading = false
        })
        .catch(error => {
          this.loading = false
          this.$q.notify('Une erreur est survenue', error)
        })
    },
    toStation (systemName, marketId) {
      this.$router.push('/station/' + systemName + '-' + marketId)
    },
    getEconomie (name) {
      return getEconomie(name)
    },
    getGovernement (name) {
      return getGovernement(name)
    },
    getServices (name) {
      return getServices(name)
    },
    getBreakDown (trafic, vaisseauInSystem) {
      Object.keys(trafic.breakdown).forEach(function (k) {
        vaisseauInSystem.push(k + ' - ' + trafic.breakdown[k])
      })
    }
  }
}
</script>

<style>

</style>
