<template>
  <q-page>
    <div class="q-pa-md flex flex-center" v-if="loading">
      <q-circular-progress
        indeterminate
        size="50px"
        color="orange"
        class="q-ma-md"
      />
    </div>
    <div v-if="station">
      <q-item class="flex column">
        <q-item-section style="padding: 10px">
          Système : {{ station.name }}<br />
          Station : {{ station.sName }}
        </q-item-section>
        <q-item-section v-if="station.commodities">
          <q-expansion-item
            expand-separator
            dense
            dense-toggle
            icon="fas fa-shopping-cart"
            :label="'Stock : ' + station.commodities.filter(it => it.stock > 0).length"
          >
            <q-list dense v-for="commodity in station.commodities.filter(it => it.stock > 0)" :key="commodity.id">
              <q-item>
                {{ commodity.name }} ({{ commodity.stock }})
              </q-item>
            </q-list>
          </q-expansion-item>
        </q-item-section>
        <q-item-section v-else>Aucune commodité en stock</q-item-section>
        <q-item-section v-if="shipYard">
          <q-expansion-item
            expand-separator
            dense
            dense-toggle
            icon="fas fa-space-shuttle"
            :label="'Vaisseau : ' + shipYard.length"
          >
            <q-list dense v-for="ship in shipYard" :key="ship.id">
              <q-item>
                {{ ship.name }}
              </q-item>
            </q-list>
          </q-expansion-item>
        </q-item-section>
        <q-item-section v-else>Aucun vaisseau</q-item-section>
        <q-item-section v-if="outFitting">
          <q-expansion-item
            expand-separator
            dense
            dense-toggle
            icon="fas fa-hammer"
            :label="'Équipement : ' + outFitting.filter((v, i, a) => a.findIndex(t => (t.name === v.name)) === i).length"
          >
            <q-list dense v-for="outFit in outFitting.filter((v, i, a) => a.findIndex(t => (t.name === v.name)) === i)" :key="outFit.id">
              <q-item>
                {{ getEquipement(outFit.name) }}
              </q-item>
            </q-list>
          </q-expansion-item>
        </q-item-section>
        <q-item-section v-else>Aucun équipement</q-item-section>
      </q-item>
    </div>
  </q-page>
</template>

<script>
import axios from 'axios'
import { getEquipement } from './utils.js'

export default {
  name: 'station',
  props: {
    stationProps: String
  },
  data () {
    return {
      loading: false,
      station: null,
      shipYard: null,
      outFitting: null
    }
  },
  watch: {
    stationProps: {
      immediate: true,
      handler (props) {
        if (props !== undefined) {
          const propsSplit = props.split('-')
          this.loading = true
          axios.get('https://www.edsm.net/api-system-v1/stations/market?systemName=' + propsSplit[0] + '&marketId=' + propsSplit[1])
            .then(response => {
              this.station = response.data
              axios.get('https://www.edsm.net/api-system-v1/stations/shipyard?systemName=' + propsSplit[0] + '&marketId=' + propsSplit[1])
                .then(response => {
                  this.shipYard = response.data.ships
                  axios.get('https://www.edsm.net/api-system-v1/stations/outfitting?systemName=' + propsSplit[0] + '&marketId=' + propsSplit[1])
                    .then(response => {
                      this.outFitting = response.data.outfitting
                      this.loading = false
                    })
                    .catch(error => {
                      this.loading = false
                      this.$q.notify('Une erreur est survenue', error)
                    })
                })
                .catch(error => {
                  this.loading = false
                  this.$q.notify('Une erreur est survenue', error)
                })
            })
            .catch(error => {
              this.loading = false
              this.$q.notify('Une erreur est survenue', error)
            })
        }
      }
    }
  },
  methods: {
    getEquipement (name) {
      return getEquipement(name)
    }
  }
}
</script>
