<template>
    <v-container>
        <v-card
            elevation="2"
            class="mt-3 pa-3 pt-0">

            <v-card-title class="pl-0"> View sensor </v-card-title>

            <!--<SensorDetails :scopes="scopes" :sensor="entity"></SensorDetails>-->

            <v-divider class="mt-2 mb-2"></v-divider>

            <div class="text-h5"> Configuration </div>
            <v-expansion-panels>
                <v-expansion-panel>
                    <v-expansion-panel-header> Trigger </v-expansion-panel-header>
                    <v-expansion-panel-content>
                        <!--<Trigger :entity="entity" :scopes="scopes"></Trigger>-->
                    </v-expansion-panel-content>
                </v-expansion-panel>

                <v-expansion-panel
                    v-if="hasScope(scopes, 'ListSensorAlerts')">
                    <v-expansion-panel-header> Alerts </v-expansion-panel-header>
                    <v-expansion-panel-content>
                        <!--<Alerts :scopes="scopes" :entity="entity"></Alerts>-->
                    </v-expansion-panel-content>
                </v-expansion-panel>
            </v-expansion-panels>

            <v-card-actions>
                <v-btn
                    @click="$router.back()"
                    v-if="this.$route.query.canReturn != null && this.$route.query.canReturn == 'true'">
                    Return
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-container>
</template>

<script lang="ts">
//import { ApiError } from '@/commonApi'
//import { ERR_TEXT, SERVER } from '@/main'
import Vue from 'vue'
import { DataTableHeader, InputValidationRules } from 'vuetify'
//import {Entity, Scope} from "@/api";
//import SensorDetails from "@/views/sensors/view/SensorDetails.vue";
//import Trigger from "@/views/sensors/view/Trigger.vue";
//import Alerts from "@/views/sensors/view/Alerts.vue";

interface Data {
    snackbar: boolean,
    snackbarText: string,
    scopes: Scope[],
    entity: Entity | null,
}

enum Scope {

}

class Entity {

}

export default Vue.extend({
    //components: {Alerts, Trigger, SensorDetails},
    props: {
        orgId: String,
        locationId: String,
        roomId: String,
        controllerId: String,
        id: String,
    },
    data(): Data {
        return {
            snackbar: false,
            snackbarText: '',
            scopes: [],
            entity: null,
        }
    },
    async mounted() {
        //this.scopes = (await this.getScopes())!

        //if(Scope.hasScope(this.scopes, Scope.LIST_SENSORS)) {

			// This line throws the error
		  this.entity = (await this.getEntity())!
        //}
    },
    methods: {
        hasScope: Scope.hasScope,
        async getEntity(): Promise<Entity | null> {
            /*let entity = await Entity.getSensor(Number.parseInt(this.orgId!), Number.parseInt(this.locationId!), Number.parseInt(this.roomId!), Number.parseInt(this.controllerId!), Number.parseInt(this.id!))
            if(entity instanceof ApiError) {
                this.snackbarText = ERR_TEXT
                return null
            }*/

            //return entity
			return new Entity
        },
        async getScopes(): Promise<Scope[] | null> {
            /*let org = await Entity.getOrganization(Number.parseInt(this.orgId!))
            if(org instanceof ApiError) {
                this.snackbarText = ERR_TEXT
                return null
            }

            let scopes = await org.getScopes()
            if(scopes.isFail()) {
                this.snackbarText = ERR_TEXT
                return null
            }

            return scopes.getData()*/
			return []
        },
    }
})
</script>