const deviceManufacturerFilterOptions = window?.TT_CONFIG?.DEVICE_MANUFACTURERS.map(manufacturer => ({
    value: manufacturer.name,
    text: manufacturer.name,
}));

const deviceTypeFilterOptions = window?.TT_CONFIG?.DEVICE_TYPES.map(type => ({
    value: type.name,
    text: type.name,
}));

Vue.component('device-view-switch', {
    //language=Vue
    template: `
        <div class="device-view-switch" style="margin-bottom: 10px">
          <div v-if="!isOverflowing" class="button-group" style="display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; justify-content: center; align-items: center; text-align: center; width: 100%;">
            <button @click="$emit('input', 'DeviceTable')" :class="{ 'active': value === 'DeviceTable' }" class="btn btn-primary">Devices</button>
            <button @click="$emit('input', 'DeviceManufacturer')" :class="{ 'active': value === 'DeviceManufacturer' }" class="btn btn-primary">Hersteller</button>
            <button @click="$emit('input', 'DeviceType')" :class="{ 'active': value === 'DeviceType' }" class="btn btn-primary">Geräte Typen</button>
          </div>
          <div v-else>
            <div class="dropdown">
              <button @click="showDropdown = !showDropdown" 
                      class="btn btn-primary dropdown-toggle">Ansicht</button>
              <div v-show="showDropdown" class="dropdown-menu show">
                <a href="#" @click="$emit('input', 'DeviceTable'); showDropdown = false" class="dropdown-item">Devices</a>
                <a href="#" @click="$emit('input', 'DeviceManufacturer'); showDropdown = false" class="dropdown-item">Hersteller</a>
                <a href="#" @click="$emit('input', 'DeviceType'); showDropdown = false" class="dropdown-item">Geräte Typen</a>
              </div>
            </div>
          </div>
        </div>
      `,
    props: ['value'],
    data() {
        return {
            isOverflowing: false,
            showDropdown: false,
        };
    },
    mounted() {
        this.checkOverflow();
        window.addEventListener('resize', this.checkOverflow);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.checkOverflow);
    },
    methods: {
        checkOverflow() {
            this.isOverflowing = window.innerWidth < 650
        },
    },
})

Vue.component('DeviceTable', {
  //language=Vue
  template: `
    <tt-table :data="window['TT_CONFIG']['DEVICES']" :config="DeviceTableConfig" excel-export>

      <template v-slot:top-buttons>
        <button type="button" class="btn btn-primary" @click="window.location = window['TT_CONFIG']['BASE_URL'] + '/Device/add'">
          <i class="fas fa-plus"></i>
          Device hinzufügen
        </button>
      </template>

      <template v-slot:name="{ row }">
        <a target="_blank" :href="window['TT_CONFIG']['BASE_URL'] +'/Device/Detail?id=' + row.id">{{row.name}}</a>
      </template>

      <template v-slot:locationtext="{ row }">
        <a target="_blank" :href="row['locationUrl']">{{row.locationText}}</a>
      </template>

      <template v-slot:actions="{ row }">
        <a :href="window['TT_CONFIG']['BASE_URL'] +'/Device/edit/?id=' + row.id"><i class="far fa-edit" title="Bearbeiten"></i></a>
        <a :href="window['TT_CONFIG']['BASE_URL'] +'/Device/delete/?id=' + row.id" onclick="if(!confirm('Device wirklich löschen?')) return false;" class="text-danger" title="Löschen"><i class="fas fa-trash "></i></a>
        
        <template v-if="row.zabbix_host_id !== '0' && row.zabbix_host_id !== null">
            <a :href="window['TT_CONFIG']['ZABBIX_URL'] + '/zabbix.php?action=latest.view&hostids%5B%5D=' + row.zabbix_host_id" target="_blank" class="text-info" title="Zabbix"><i class="fas fa-server"></i></a>
            <a :href="window['TT_CONFIG']['BASE_URL'] + '/Graphing?id=' + row.zabbix_host_id + '&hostname=' + row.name" target="_blank" class="text-info" title="Graphen"><i class="fas fa-chart-line"></i></a>
        </template>
      </template>

    </tt-table>
  `,
    data() {
      return {
          window: window,
          DeviceTableConfig: {
              key: 'DeviceTable',
              tableHeader: 'Device-Liste',
              defaultPageSize: 25,
              headers: [
                  { text: 'Device Name', key: 'name', sortable: true, class: 'text-nowrap', priority: 10 },
                  { text: 'Hersteller', key: 'devicemanufactor', filter: 'select',class: 'text-nowrap text-center', filterOptions: deviceManufacturerFilterOptions },
                  { text: 'Geräte Typ', key: 'devicetype', filter: 'select', class: 'text-nowrap text-center', filterOptions: deviceTypeFilterOptions , priority: 7},
                  { text: 'Pop/Adresse', key: 'locationText', filter: 'search' , class: 'text-nowrap text-center'},
                  { text: 'IP-Adresse', key: 'ip', filter: 'search',class: 'text-center', priority: 8},
                  { text: 'Mac-Adresse', key: 'mac', filter: 'search',class: 'text-center' },
                  { text: 'Seriennummer', key: 'serial', filter: 'search',class: 'text-center' },
                  { text: 'Preis', key: 'price', filter: 'numberRange',class: 'text-center', suffix: ' €' },
                  { text: 'max. Leistung', key: 'power', filter: 'numberRange',class: 'text-center', suffix: ' W' },
                  {
                      text: 'Backup',
                      key: 'backup',
                      filter: 'iconSelect',
                      filterOptions: [
                          { value: 'ok', text: 'Configbackup aktuell', icon: 'fa-regular fa-circle-check text-success' },
                          { value: 'auto', text: 'Configbackup aktuell', icon: 'fa-regular fa-circle-a text-success' },
                          { value: 'aged', text: 'Letztes Configbackup älter als 48 Stunden', icon: 'fa-regular fa-circle-xmark' },
                          { value: 'na', text: 'N/A', icon: 'fa-regular fa-ban text-warning' }
                      ],
                      priority: 6,
                      sortable: false,
                  },                  {
                      text: 'Status',
                      key: 'zabbix_online',
                      filter: 'iconSelect',
                      filterOptions: [
                          { value: 0, text: 'Status unbekannt', icon: 'fa-regular fa-circle-xmark' },
                          { value: 1, text: 'Offline', icon: 'fa-regular fa-circle-xmark text-danger' },
                          { value: 2, text: 'Online', icon: 'fa-regular fa-circle-check text-success' },
                      ],
                      priority: 5,
                      sortable: false,
                  },
                  {text: 'Aktionen', key: 'actions', class: 'text-center', sortable: false, filter: false, priority: 9},
              ],
          },
      }
    }
});

Vue.component('DeviceManufacturer', {
    //language=Vue
    template: `
    <tt-table :data="window['TT_CONFIG']['DEVICE_MANUFACTURERS']" :config="DeviceManufacturerConfig" excel-export>

      <template v-slot:top-buttons>
        <button type="button" class="btn btn-primary" @click="window.location = window['TT_CONFIG']['BASE_URL'] + '/Devicemanufactor/add'">
          <i class="fas fa-plus"></i>Hersteller hinzufügen
        </button>
      </template>

      <template v-slot:actions="{ row }">
        <a :href="window['TT_CONFIG']['BASE_URL'] +'/Devicemanufactor/edit/?id=' + row.id"><i class="far fa-edit" title="Bearbeiten"></i></a>
        <a :href="window['TT_CONFIG']['BASE_URL'] +'/Devicemanufactor/delete/?id=' + row.id" onclick="if(!confirm('Hersteller wirklich löschen?')) return false;" class="text-danger" title="Löschen"><i class="fas fa-trash "></i></a>
      </template>

    </tt-table>
  `,
    data() {
        return {
            window: window,
            DeviceManufacturerConfig: {
                key: 'DeviceManufacturer',
                tableHeader: 'Hersteller',
                defaultPageSize: 25,
                headers: [
                    { text: 'Name', key: 'name', sortable: true, class: 'text-nowrap', priority: 10 },
                    { text: 'Erstellungsdatum', key: 'created', filter: 'date', class: 'text-center'},
                    { text: 'Erstellt von', key: 'creator', filter: 'search', class: 'text-center'},
                    { text: 'Aktionen', key: 'actions', class: 'text-center', sortable: false, filter: false, priority: 9},
                ],
            },
        }
    }
});

Vue.component('DeviceType', {
    //language=Vue
    template: `
    <tt-table :data="window['TT_CONFIG']['DEVICE_TYPES']" :config="DeviceTypeConfig" excel-export>
          
        <template v-slot:top-buttons>
          <button type="button" class="btn btn-primary" @click="window.location = window['TT_CONFIG']['BASE_URL'] + '/Devicetype/add'">
             <i class="fas fa-plus"></i>Device Type hinzufügen
          </button>
        </template>
    
        <template v-slot:actions="{ row }">
          <a :href="window['TT_CONFIG']['BASE_URL'] +'/Devicetype/edit/?id=' + row.id"><i class="far fa-edit" title="Bearbeiten"></i></a>
          <a :href="window['TT_CONFIG']['BASE_URL'] +'/Devicetype/delete/?id=' + row.id" onclick="if(!confirm('Gerätetyp wirklich löschen?')) return false;" class="text-danger" title="Löschen"><i class="fas fa-trash "></i></a>
        </template>
      
      </tt-table>
    `,
    data() {
        return  {
            window: window,
            DeviceTypeConfig: {
                key: 'DeviceType',
                tableHeader: 'Gerätetypen',
                defaultPageSize: 25,
                headers: [
                    { text: 'Name', key: 'name', sortable: true, class: 'text-nowrap', priority: 10 },
                    { text: 'Hersteller', key: 'manufacturer', filter: 'search', class: 'text-center'},
                    { text: 'Preis', key: 'price', filter: 'numberRange', class: 'text-center', suffix: ' €' },
                    { text: 'max. Leistung', key: 'power', filter: 'numberRange', class: 'text-center', suffix: ' W' },
                    { text: 'Erstellungsdatum', key: 'created', filter: 'date', class: 'text-center'},
                    { text: 'Erstellt von', key: 'creator', filter: 'search', class: 'text-center'},
                    { text: 'Aktionen', key: 'actions', class: 'text-center', sortable: false, filter: false, priority: 9},
                ],
            },
        }
    }
})

Vue.component('Device', {
    //language=Vue
    template: `
      <tt-card>
        <device-view-switch v-model="currentView"></device-view-switch>
        
        <component :is="currentView"></component>
      </tt-card>
    `,
    data() {
        return {
            window: window,
            currentView: 'DeviceTable',
        };
    },
    beforeMount() {
        const storedView = window.localStorage.getItem('tt-device-view');
        if (storedView) {
            this.currentView = storedView;
        }
    },
    watch: {
        currentView() {
            window.localStorage.setItem('tt-device-view', this.currentView);
        }
    },
});