<script setup>
  import AppTopbar from './components/AppTopbar.vue'
  import AppFooter from './components/AppFooter.vue'
  import StatsWidget from './components/dashboard/StatsWidget.vue'
  import SalesTrendWidget from './components/dashboard/SalesTrendWidget.vue'
  import RecentActivityWidget from './components/dashboard/RecentActivityWidget.vue'
  import ProductOverviewWidget from './components/dashboard/ProductOverviewWidget.vue'

  import PropertiesWidget from './components/dashboard/PropertiesWidget.vue'
  import CommandsWidget from './components/dashboard/CommandsWidget.vue'

  import { ref } from 'vue'
  import DevicesWidget from './components/dashboard/DevicesWidget.vue'

  const selectedDevice = ref(null)
</script>

<template>
  <Toast position="bottom-right" />

  <div class="layout-container">
    <AppTopbar />
    <div class="layout-grid">
      <DevicesWidget @select="selectedDevice = $event" />
      <div v-if="selectedDevice" class="layout-grid-row">
        <PropertiesWidget
          v-if="selectedDevice"
          :key="'props-' + selectedDevice"
          :device-id="selectedDevice"
        />

        <CommandsWidget
          v-if="selectedDevice"
          :key="'cmds-' + selectedDevice"
          :device-id="selectedDevice"
        />
      </div>
      <!-- <StatsWidget /> -->
      <!-- <div class="layout-grid-row">
                <SalesTrendWidget />
                <RecentActivityWidget />
            </div>-->
      <!-- <ProductOverviewWidget />  -->
    </div>
    <AppFooter />
  </div>
</template>
