<script setup>

import { ref, onMounted } from 'vue';
import { Button } from 'pankow';
import { prettyDate, prettyDecimalSize } from 'pankow/utils';
import Section from '../components/Section.vue';
import SystemModel from '../models/SystemModel.js';
import DashboardModel from '../models/DashboardModel.js';

const systemModel = SystemModel.create();
const dashboardModel = DashboardModel.create();

const config = ref({});
const info = ref({});
const memory = ref({});
const cpus = ref({});

function onReboot() {
  systemModel.reboot();
}

onMounted(async () => {
  let [error, result] = await systemModel.memory();
  if (error) return console.error(error);
  memory.value = result;

  [error, result] = await systemModel.cpus();
  if (error) return console.error(error);
  cpus.value = result;

  [error, result] = await systemModel.info();
  if (error) return console.error(error);
  info.value = result;

  [error, result] = await dashboardModel.getConfig();
  if (error) return console.error(error);
  config.value = result;
});

</script>

<template>
  <div class="content">
    <Section :title="$t('system.title')">
      <template #header-buttons>
        <Button href="/logs.html?id=box" target="_blank">{{ $t('main.action.logs') }}</Button>
        <Button @click="onReboot()">{{ $t('main.action.reboot') }}</Button>
      </template>

      <div class="info-row">
        <div class="info-label">{{ $t('system.info.platformVersion') }}</div>
        <div class="info-value">v{{ config.version }} ({{ config.ubuntuVersion }})</div>
      </div>
      <div class="info-row">
        <div class="info-label">{{ $t('system.info.vendor') }}</div>
        <div class="info-value">{{ info.sysVendor }}</div>
      </div>
      <div class="info-row">
        <div class="info-label">{{ $t('system.info.product') }}</div>
        <div class="info-value">{{ info.productName }}</div>
      </div>
      <div class="info-row">
        <div class="info-label">CPU</div>
        <div class="info-value">{{ cpus.length ? `${cpus.length} Core "${cpus[0].model}"` : '' }}</div>
      </div>
      <div class="info-row">
        <div class="info-label">{{ $t('system.info.memory') }}</div>
        <div class="info-value">{{ prettyDecimalSize(memory.memory) }} RAM <span v-show="memory.swap">&amp; {{ prettyDecimalSize(memory.swap) }} Swap</span></div>
      </div>
      <div class="info-row">
        <div class="info-label">{{ $t('system.info.uptime') }}</div>
        <div class="info-value">{{ info.uptimeSecs }}</div>
      </div>
      <div class="info-row" ng-show="info.activationTime">
        <div class="info-label">{{ $t('system.info.activationTime') }}</div>
        <div class="info-value">{{ prettyDate(info.activationTime) }}</div>
      </div>

    </Section>
  </div>
</template>
