<template>
  <div class="q-pa-md">
    <q-list>
      <q-item-label header v-if="!readOnly">Alegere dispozitiv expediere</q-item-label>

      <q-item tag="label" v-ripple  v-if="!readOnly">
        <q-item-section side top>
          <q-radio v-model="sender" val="*" :disable="disabled"/>
        </q-item-section>

        <q-item-section>
          <q-item-label>Aleator</q-item-label>
          <q-item-label caption>
            Expediează folosind toate dispozitivele asociate contului
          </q-item-label>
        </q-item-section>
      </q-item>

      <template v-for="device in devices">
        <template v-if="device.hasUsableSims">
          <template v-if="sim.usable" v-for="sim in device.sims">
            <q-item tag="label" v-ripple>

              <q-item-section side top v-if="!readOnly">
                <q-radio v-model="sender" :val="sim.simSerialNumber" :disable="disabled"/>
              </q-item-section>

              <q-item-section :class="device.online ? 'online' : 'offline'">
                <q-item-label>{{ sim.displayName }} ({{ sim.phoneNumber }}) - {{ device.model }}</q-item-label>
                <q-item-label caption>
                  {{ sim.simSerialNumber }}
                  <span v-if="device.online">ONLINE</span>
                  <span v-else>OFFLINE</span>
                  <br/>
                  <span>Ultima actualizare: {{ moment(device.lastSeen).format("YYYY-MM-DD HH:mm:ss") }}</span>
                </q-item-label>
              </q-item-section>
            </q-item>
          </template>
        </template>
      </template>

    </q-list>
  </div>
</template>

<script>

module.exports = {
  name: "DeviceSelector",
  methods: {
    moment: function(timestamp) {
      return moment(timestamp);
    }
  },
  data: function() {
    return {
      devices: []
    };
  },
  computed:
  {
    sender: {
      get() {
        return this.value;
      },
      set(newSender) {
        this.$emit("input", newSender);
      }
    }
  },
  props: {
    value: {
      type: String,
      required: true
    },
    readOnly: {
      type: Boolean,
      default: false
    },
    editable: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    stompClient: Object,
    connected: Boolean
  },
  created() {
    this.sender = this.value;
    var process = (deviceInfoList) => {
      var devices = [];
      deviceInfoList.forEach(deviceInfo => {
        var device = deviceInfo.device;
        device.sims = deviceInfo.sims;
        device.hasUsableSims = deviceInfo.sims.filter(sim => sim.usable).length > 0;
        devices.push(device);
      });
      this.devices = devices;
    }
    this.stompClient.subscribe(
        "/user/topic/device/device-info",
        (message) => {
          var deviceInfo = message.data;
          var device = deviceInfo.device;
          device.sims = deviceInfo.sims;
          device.hasUsableSims = deviceInfo.sims.filter(sim => sim.usable).length > 0;
          var existingDeviceCount = this.devices.length;
          for (var i=0; i<existingDeviceCount; i++) {
            if (this.devices[i].uuid === device.uuid) { // found
              break;
            }
          }
          if (i < existingDeviceCount) {
            Vue.set(this.devices, i, device);
          } else {
            this.devices.push(device);
          }
        }
    );
    axios.get('/api/v1/device/user-devices')
        .then(response => {
          process(response.data);
        })
        .catch(error => {
        });

  },
  beforeDestroy() {
    this.stompClient.unsubscribe("/user/topic/device/device-info");
  }
}

</script>

<style lang="css">

  .offline {
    opacity: 0.5;
  }

</style>