<template>
  <!--  <span class="status-indicator" :[status]="true" :pulse="pulse"></span>-->
  <div :class="'circle small ' + color "></div>
</template>
<script>

/*let routes = require('/public/js/fos_js_routes.json');
import Routing from '/public/bundles/fosjsrouting/js/router';
Routing.setRoutingData(routes);*/
import Routing from 'fos-router';
var url = Routing.generate('api_get_global_status');

import axios from 'axios';
const httpClient = axios.create();
axios.defaults.timeout = 1000;
let delay = 1;

export default {
  name: 'GlobalStatusIndicator',
  props: {
    /*color: {
      type: String,
      default: 'grey',
      validator(value) {
        if (value === '') return true;
        return ['grey', 'green', 'red', 'yellow'].indexOf(value) !== -1;
      },
    },*/
    pulse: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      color: 'grey'
    }
  },
  created() {
    //console.log(process.env.)
    this.callApi()
  },
  mounted() {

    let myInterval = setInterval(() => {
      //make call to refresh logs
      this.callApi()
      //console.log(delay);
    }, delay * 10000); //using 1s for demo purposes

  },
  methods: {

    callApi () {
      httpClient.get(url)
          .then(response => {
            this.results = response.data["lights"];
            var item =  this.results.find(item => item.name === "Global");
            if(item !== undefined){
              this.color = item["state"];
            }else{
              this.color = 'grey';
            }
          })
          .catch(e => {
            this.color = 'grey'
          })
    }
  }
};
</script>