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 {
            window:        window,
            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 v-if="window['TT_CONFIG']['IS_ADMIN'] === '1'">
                  <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 }">
                    <template v-if="window['TT_CONFIG']['IS_ADMIN'] === '1'">
                      <a target="_blank" :href="row['locationUrl']">{{row.locationText}}</a>
                    </template>
                    <template v-else>
                      {{row.locationText}}
                    </template>
                  </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:         [],
            },
        }
    },
    mounted() {
        this.DeviceTableConfig.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'},
        ];

        if (this.window.TT_CONFIG['IS_ADMIN'] === '1') {
            this.DeviceTableConfig.headers = [
                ...this.DeviceTableConfig.headers,
                {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-show="window['TT_CONFIG']['IS_ADMIN'] === '1'" 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);
        }
    },
});