<template>
  <div id="sender">

    <q-list dense bordered>

      <q-item-label header>
        {{ connected ? 'Conectat' : 'Ne-conectat' }} <div class="led-light" :class="connected ? 'led-green' : 'led-red'"></div>
      </q-item-label>

      <template v-for="sim in simNumbers">
        <q-separator></q-separator>
        <q-item tag="label" v-ripple>
          <q-item-section side top>
            <q-toggle v-model="sim.usable" @input="updateSimAndDeviceInfo" icon="sms" :disable="!connected"></q-toggle>
          </q-item-section>
          <q-item-section>
            <q-item-label>
              <q-input v-model="sim.phoneNumber" dense outlined type="tel" placeholder="Numărul aferent SIM" :label="`Setați număr ${sim.carrierName}`" debounce="500" @input="updateSimAndDeviceInfo" :disable="!connected || !sim.usable"></q-input>
            </q-item-label>
            <q-item-label caption>
              Cod: {{ sim.simSerialNumber}}
              #{{ sim.subscriptionId }}
            </q-item-label>
          </q-item-section>
        </q-item>
        <q-item>
          <sim-worker :sim-serial-number="sim.simSerialNumber" :subscription-id="sim.subscriptionId" :stomp-client="stompClient" v-if="connected && sim.usable"></sim-worker>
        </q-item>
      </template>
    </q-list>
    <br/>
    <q-btn label="Ieșire" @click="quit" color="primary" push></q-btn>
  </div>
</template>

<script>
module.exports = {
  name: 'Sender',
  components: {
  },
  props: {
    maxMessageSize: Number
  },
  data: function() {
    return {
      stompClient: null,
      connected: false,
      deviceInfo: null,
      simNumbers: []
    }
  },
  methods: {
    quit: function() {
      this.$q.dialog({
        title: "Confirmare",
        message: "Sigur doriți să închideți gSMS? Acest dispozitiv nu va mai putea trimite mesaje SMS din platformă",
        cancel: true,
        persistent: true
      })
        .onOk(() => {
          this.stompClient.disconnect();
          cordova.plugins.exit();
        });
    },
    updateSimAndDeviceInfo() {

      window.plugins.sim.getSimInfo(
          simInfo => {
            var deviceI = Object.assign({}, device, simInfo);
            delete deviceI.cards;
            deviceI.online = true;
            this.deviceInfo = {device: deviceI, sims: simInfo.cards};
            this.simNumbers.forEach(simNumber => {
              this.deviceInfo.sims.forEach(sim => {
                if (sim.simSerialNumber === simNumber.simSerialNumber) {
                  sim.phoneNumber = simNumber.phoneNumber;
                  sim.usable = simNumber.usable;
                }
              })
            });
            this.stompClient.sendJson(
                "/app/device/sender-online",
                this.deviceInfo
            );
          },
          ignored => {
          }
      );
    }
  },
  created() {

      axios
          .get('/api/v1/device/' + device.uuid)
          .then(response => {
            var data = response.data;
            var simNumbers = [];
            data.sims.forEach(sim => {
              simNumbers.push({
                simSerialNumber: sim.simSerialNumber,
                subscriptionId: sim.subscriptionId,
                phoneNumber: sim.phoneNumber,
                carrierName: sim.carrierName,
                usable: sim.usable
              });
            });
            this.simNumbers = simNumbers;
          }).catch(error => { // might be the first time we open this, populate simNumbers from local device
              window.plugins.sim.getSimInfo(
                  simInfo => {
                    var simNumbers = [];
                    simInfo.cards.forEach(sim => {
                      simNumbers.push({
                        simSerialNumber: sim.simSerialNumber,
                        subscriptionId: sim.subscriptionId,
                        phoneNumber: sim.phoneNumber,
                        carrierName: sim.carrierName,
                        usable: true
                      });
                    });
                    this.simNumbers = simNumbers;
                  },
                  ignored => {
                  }
              );
          })
          .then(() => {
            this.stompClient = new ReconnectingStompClient("/wsms", {
              onConnect: () => {
                this.connected = true;
                this.updateSimAndDeviceInfo();
              },
              onDisconnect: () => this.connected = false
            });

            setInterval(() => {
              this.updateSimAndDeviceInfo();
            }, 60 * 1000)

          });

  }
}

</script>

<style scoped>
  .led-light { margin: 0 auto; width: 0.7em; height: 0.7em; border-radius: 50%; display: inline-block; }
  .led-red { background-color: #f00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #431313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px; }
  .led-green { background-color: #abff00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #314701 0 -1px 9px, #89ff00 0 2px 12px; }
</style>

<style>
  .row {
    margin: 0;
  }

  .q-item .col {
    padding: 0 !important;
  }
</style>
