Vue.component('VoiceCallActive', {
    //language=Vue
    template: `
      <tt-card>

        <tt-table :fetch-url="window['TT_CONFIG']['VOICE_CALL_ACTIVE_API_URL'] + '?do=getActiveCalls'"
                  :config="VoiceCallActiveTableConfig"
                  small ref="table">

          <template v-slot:top-buttons>
            <button type="button" class="btn btn-primary" @click="refresh" data-toggle="tooltip" data-placement="bottom"
                    title="Refreshing too often will run into API-Rate limits and will cause errors.">
              <template v-if="refreshLoading">
                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
              </template>
              <template v-else>
                <i class="fas fa-sync-alt"></i>
                Refresh
              </template>
            </button>

            <div class="d-flex">
              <label style="margin-bottom: 0 !important;">
                <input type="checkbox" id="autoRefresh" data-toggle="toggle" data-size="lg">
                <span class="ml-2">Auto Refresh (5sec)</span>
              </label>
              <span style="width: 50px"></span>
              <div class="voice-yellow p-2">Ringing</div>
              <div class="voice-red p-2">Outgoing</div>
              <div class="voice-green p-2">Ingoing</div>
            </div>
          </template>

          <template v-slot:answer_time="{ row }">
            {{ !isNaN(new Date(row.answer_time)) ? window.moment(row.answer_time, 'YYYY-MM-DD HH:mm:ss Z').format('DD.MM.YYYY HH:mm:ss') : 'Call is not running' }}
          </template>

          <template v-slot:status="{ row }">
            <i v-if="!row.dst_device_extension && row.status !== 'Ringing'" class="fas fa-phone-arrow-up-right"></i>
            <i v-else-if="!row.dst_device_extension && row.status === 'Ringing'"
               class="fas fa-phone-arrow-up-right fa-shake"></i>
            <i v-else-if="row.status === 'Ringing'" class="fas fa-phone-arrow-down-left fa-shake"></i>
            <i v-else class="fas fa-phone-arrow-down-left"></i>
            {{ row.status }}
          </template>

        </tt-table>

      </tt-card>
    `,
    data() {
        return {
            window: window,
            VoiceCallActiveTableConfig: {
                customRowClass: function (row) {
                    if (row.status.toLowerCase() === 'ringing') {
                        return 'voice-yellow';
                    }
                    if (!row.dst_device_extension) {
                        return 'voice-red';
                    }
                    if (row.status.toLowerCase() === 'answered') {
                        return 'voice-green';
                    }
                },
                headers: [
                    {text: 'Call ID', key: 'id', filter: false, sortable: false},
                    {text: 'Status', key: 'status', filter: false, sortable: false},
                    {text: 'Answer Time', key: 'answer_time', filter: false, sortable: false},
                    {text: 'Duration', key: 'duration', filter: false, sortable: false},
                    {text: 'Source', key: 'src', filter: false, sortable: false},
                    {text: 'Device Type', key: 'device_type', filter: false, sortable: false},
                    {text: 'Destination', key: 'localized_dst', filter: false, sortable: false},
                    {text: 'Destination User', key: 'dst_user', filter: false, sortable: false},
                    {text: 'Destination Device Extension', key: 'dst_device_extension', filter: false, sortable: false},
                ],
                tableHeader: 'Active Voice Calls',
                key: 'VoiceCallActive',
            },
            refreshLoading: false,
            autoRefresh: null,
        }
        },
    mounted() {
        //TODO: create vue tooltip component
        $('[data-toggle="tooltip"]').tooltip();

        const _this = this;
        $('#autoRefresh').change(function () {
            console.log(this.checked);
            if (this.checked) {
                _this.autoRefresh = setInterval(function () {
                    _this.refresh();
                }, 5000);
            } else {
                clearInterval(_this.autoRefresh);
            }
        })
    },
    methods: {
        async refresh() {
            this.refreshLoading = true;
            this.$refs.table.loading = true;
            await this.$refs.table.fetchData();
            $('.tooltip').tooltip('hide');
            this.$refs.table.loading = false;
            this.refreshLoading = false;
        },
    }

})