Vue.filter('cleanupURL', function (value) {
    value = value.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split('/')[0];
    return value;
})

Vue.component('RaspberryDisplay', {
    //language=Vue
    template: `
      <div>
        <tt-page-title :title="window['TT_CONFIG']['PAGE_TITLE']" :path="window['TT_CONFIG']['PATH']"></tt-page-title>

        <div class="card">
          <tt-loader v-if="loading"></tt-loader>

          <div class="p-2">
            <h3>8322 Studenzen NOC Displays</h3>

            <div class="display-grid">
              <div v-for="display in displays" :key="display.id"
                   :class="['display', display['display_label'].includes('-B-') ? 'big-42-inch' : 'small-27-inch']"
                   :style="display['custom_style']" style="">
                <div
                    style="display: grid; grid-template-columns: max-content auto max-content; justify-items: center;width:100%; padding: 0 2px">
                  <div>
                    <!-- FONT AWESOME ONLINE GREEN CIRCLE -->
                    <i class="fas fa-circle" data-toggle="tooltip" title="ONLINE" style="color: green"></i>
                  </div>
                  <div>
                    <div @click.prevent="enableDisplayURLEditMode(display.id)" style="cursor: pointer">
                      <span v-if="displaysURLEditMode !== display.id">{{ display['display_url'] | cleanupURL }}</span>
                      <input v-else-if="displaysURLEditMode === display.id"
                             v-model="display['display_url']"
                             @keyup.enter="disableDisplayURLEditMode(display.id, display['display_url'])"
                             @blur="disableDisplayURLEditMode(display.id, display['display_url'])"
                             ref="displayURLEditInput"
                             class="form-control"
                             type="text">
                    </div>

                  </div>
                  <div style="cursor: pointer">
                    <!-- FONT AWESOME REBOOT ICON -->
                    <i class="fas fa-red fa-sync-alt" data-toggle="tooltip" title="Reboot this Raspberry"
                       @click="rebootRaspberry(display.id)"
                       style="color: green"></i>
                  </div>
                </div>

                <div>
                  <!-- Checkbox for Auto Refresh Enabled -->
                  <div style="display: inline-block" data-toggle="tooltip"
                       :title="\`Auto refresh is \${display['auto_refresh_enabled'] ? 'enabled' : 'disabled'}.\`">
                    <input type="checkbox" :id="'auto_refresh_enabled_checkbox_' + display.id"
                           v-model="display['auto_refresh_enabled']"
                           @change="submitChanges(display.id, 'auto_refresh_enabled', display['auto_refresh_enabled'])">
                    <label :for="'auto_refresh_enabled_checkbox_' + display.id">ARF</label>
                  </div>

                  <!-- This will only display if both are true, consider adjusting logic as needed -->
                  <span style="margin: 0 4px"> | </span>

                  <!-- Checkbox for Margin Hotfix Enabled -->
                  <div style="display: inline-block" data-toggle="tooltip"
                       :title="\`Margin Hotfix is \${display['margin_hot_fix_enabled'] ? 'enabled' : 'disabled'}.\`">

                    <input type="checkbox" :id="'margin_hot_fix_enabled_checkbox_' + display.id"
                           v-model="display['margin_hot_fix_enabled']"
                           @change="submitChanges(display.id, 'margin_hot_fix_enabled', display['margin_hot_fix_enabled'])">
                    <label :for="'margin_hot_fix_enabled_checkbox_' + display.id">MHF</label>
                  </div>
                </div>

                <div v-text="display['display_label']"></div>

              </div>
            </div>
          </div>
        </div>
      </div>
    `,

    data() {
        return {
            loading: false, displaysURLEditMode: null, displays: null, window: window
        }
    },
    mounted() {
        this.fetchDisplays().then()
    }, methods: {
        async rebootRaspberry(displayID) {
            this.loading = true;
            await axios.get(`${window['TT_CONFIG']["BASE_URL"]}/api?do=reboot`, {
                params: {
                    displayID: displayID
                }
            });
            this.loading = false;
        }, async fetchDisplays() {
            this.loading = true;
            const response = await axios.get(`${window['TT_CONFIG']["BASE_URL"]}/api?do=getDisplays`);
            this.displays = response.data.result;
            this.loading = false;
            Vue.nextTick(() => {
                $('[data-toggle="tooltip"]').tooltip('dispose');
                $('[data-toggle="tooltip"]').tooltip();
            });
        }, enableDisplayURLEditMode(displayID) {
            this.displaysURLEditMode = displayID;
            const _this = this;
            // wait for the DOM to update
            Vue.nextTick(() => {
                _this.$refs['displayURLEditInput'][0].focus();
            });
        }, disableDisplayURLEditMode(displayID, displayURL) {
            this.displaysURLEditMode = null;
            this.submitChanges(displayID, 'display_url', displayURL);
        }, async submitChanges(displayID, field, value) {
            this.loading = true;
            await axios.get(`${window['TT_CONFIG']["BASE_URL"]}/api?do=change`, {
                params: {
                    displayID: displayID, field: field, value: value,
                }
            });
            await this.fetchDisplays();
            this.loading = false;
        }
    },


})