<script setup>

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

const systemModel = SystemModel.create();
const appsModel = AppsModel.create();
const volumesModel = VolumesModel.create();
const tasksModel = TasksModel.create();

const busy = ref(false);
const lastUpdated = ref(0);
const disks = ref([]);

async function updateTaskStatus(id) {
  const [error, result] = await tasksModel.get(id);
  if (error) return setTimeout(updateTaskStatus.bind(null, id), 5000);

  if (!result.active) return busy.value = false;
  busy.value = true;

  setTimeout(updateTaskStatus.bind(null, id), 2000);
}

async function onRescan() {
  busy.value = true;

  const [error, result] = await systemModel.rescanDiskUsage();
  if (error) return console.error(error);

  updateTaskStatus(result);
}

// https://stackoverflow.com/questions/1484506/random-color-generator
function rainbow(numOfSteps, step) {
  // This function generates vibrant, "evenly spaced" colours (i.e. no clustering). This is ideal for creating easily distinguishable vibrant markers in Google Maps and other apps.
  // Adam Cole, 2011-Sept-14
  // HSV to RBG adapted from: http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript
  var r, g, b;
  var h = step / numOfSteps;
  var i = ~~(h * 6);
  var f = h * 6 - i;
  var q = 1 - f;
  switch(i % 6){
  case 0: r = 1; g = f; b = 0; break;
  case 1: r = q; g = 1; b = 0; break;
  case 2: r = 0; g = 1; b = f; break;
  case 3: r = 0; g = q; b = 1; break;
  case 4: r = f; g = 0; b = 1; break;
  case 5: r = 1; g = 0; b = q; break;
  }
  var c = '#' + ('00' + (~ ~(r * 255)).toString(16)).slice(-2) + ('00' + (~ ~(g * 255)).toString(16)).slice(-2) + ('00' + (~ ~(b * 255)).toString(16)).slice(-2);
  return (c);
}

// https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array
function shuffle(a) {
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [a[i], a[j]] = [a[j], a[i]];
  }
  return a;
}

let colorIndex = 0;
let colors = [];
function resetColors(n) {
  colorIndex = 0;
  colors = [];
  for (let i = 0; i < n; i++) colors.push(rainbow(n, i));
  shuffle(colors);
}

function getNextColor() {
  return colors[colorIndex++];
}

async function refresh() {
  let [error, result] = await appsModel.list();
  if (error) return console.error(error);

  const appsById = {};
  result.forEach(a => { appsById[a.id] = a; });

  [error, result] = await volumesModel.list();
  if (error) return console.error(error);

  const volumesById = {};
  result.forEach(v => { volumesById[v.id] = v; });

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

  lastUpdated.value = result.ts;

  // [ { filesystem, type, size, used, available, capacity, mountpoint }]
  disks.value = Object.keys(result.filesystems).map(k => result.filesystems[k]); // convert object to array...

  disks.value.forEach(disk => {
    let usageOther = disk.used;

    resetColors(disk.contents.length);

    // if this disk is a volume amend it and remove it from contents
    disk.contents.forEach(function (content) { if (content.path === disk.mountpoint) disk.volume = volumesById[content.id]; });
    disk.contents = disk.contents.filter(function (content) { return content.path !== disk.mountpoint; });

    // only show old backups if the size is significant
    disk.contents = disk.contents.filter(function (content) { return content.id !== 'cloudron-backup-default' || content.usage > 1024*1024*1024; });

    disk.contents.forEach(function (content) {
      content.color = getNextColor();

      if (content.type === 'app') {
        content.app = appsById[content.id];
        if (!content.app) content.uninstalled = true;
        else content.label = content.app.label || content.app.fqdn;
      } else if (content.type === 'volume') {
        content.volume = volumesById[content.id];
        content.label = content.volume ? content.volume.name : 'Removed volume';
      }

      // ensure a label for ui
      content.label = content.label || content.id;

      usageOther -= content.usage;
    });

    disk.contents.sort((x, y) => { return y.usage - x.usage; }); // sort by usage

    if (disks.value[0] === disk) { // the root mount point is the first disk. keep this 'contains' in the end
      disk.contents.push({
        type: 'standard',
        label: 'Everything else (Ubuntu, etc)',
        id: 'other',
        color: '#555555',
        usage: usageOther
      });
    } else {
      disk.contents.push({
        type: 'standard',
        label: 'Used',
        id: 'other',
        color: '#555555',
        usage: usageOther
      });
    }
  });
}

onMounted(async () => {
  await refresh();
});

</script>

<template>
  <Section :title="$t('system.diskUsage.title')">
    <template #header-buttons>
      <span class="small" style="margin: auto; margin-right: 10px" v-show="!busy && lastUpdated">Last updated: {{ prettyDate(lastUpdated) }}</span>
      <Button tool @click="onRescan()" :disabled="busy" :loading="busy" icon="fa-solid fa-sync-alt" />
    </template>

    <div v-for="(disk, index) in disks" :key="disk.filesystem">
      <hr style="margin: 5px 0px;" v-show="index !== 0"/>
      <div>
        <div style="display: flex; align-items: baseline; justify-content: space-between;">
          <h3 class="no-wrap" style="font-size: 20px;" v-html="$t('system.diskUsage.mountedAt', { filesystem: disk.filesystem, mountpoint: disk.mountpoint })"></h3>
          <div class="text-muted" style="white-space:nowrap;" v-if="disk.available && disk.size" v-html="$t('system.diskUsage.usedInfo', { used: prettyDecimalSize(disk.used), size: prettyDecimalSize(disk.size) })"></div>
          <div class="text-muted" style="white-space:nowrap;" v-else>{{ $t('system.diskUsage.notAvailableYet') }}</div>
        </div>
        <div class="usage-bar">
          <div class="usage-bar-section" v-for="content in disk.contents" :key="content" :style="{ width: `${content.usage / disk.size * 100}%`, backgroundColor: content.color }" v-tooltip="`${content.label} ${prettyDecimalSize(content.usage)}`"></div>
          <div class="usage-bar-section-remaining">{{ prettyDecimalSize(disk.available) }}</div>
        </div>
        <div class="text-right text-muted" style="margin-top: 10px;" v-show="disk.speed !== -1">{{ $t('system.diskUsage.diskSpeed', { speed: disk.speed }) }}</div>
        <p v-if="disk.volume" v-html="$t('system.diskUsage.volumeContent', { name: disk.volume.name })"></p>
        <p v-else>{{ $t('system.diskUsage.diskContent') }}:</p>
        <div v-for="content in disk.contents" :key="content.id" class="disk-content">
          <span class="color-indicator" :style="{ backgroundColor: content.color }">&nbsp;</span>
          <span v-show="content.type === 'cloudron-backup-default'">{{ content.path }} (Old Backups)</span>
          <span v-show="content.type === 'standard'">{{ content.label }}</span>
          <span v-show="content.type === 'swap'">{{ content.label }}</span>
          <span v-show="content.type === 'app'">
            <a v-if="content.app" :href="`/#/app/${content.app.id}/storage`">{{ content.label }}</a>
            <span v-else>{{ $t('system.diskUsage.uninstalledApp') }}</span>
          </span>
          <span v-show="content.type === 'volume'"><a href="/#/volumes">{{ content.label }}</a></span>
          <small class="disk-content-size">{{ prettyDecimalSize(content.usage) }}</small>
        </div>
      </div>
    </div>
  </Section>
</template>

<style scoped>

.usage-bar {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: 20px;
  background-color: #d8dee4;
  color: #7f7f7f;
}

@media (prefers-color-scheme: dark) {
  .usage-bar {
    background-color: white;
  }
}

.usage-bar-section {
  display: inline-block;
  height: 100%;
}

.usage-bar-section-remaining {
  display: inline-block;
  height: 100%;
  margin: auto;
}

.color-indicator {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  line-height: 16px;
  margin-right: 4px;
}

.disk-content {
  white-space: nowrap;
  overflow: auto;
}

.disk-content-size {
  color: #777;
  margin-left: 4px;
}

.disks-last-updated {
  font-size: 12px;
  font-weight: bold;
  align-self: center;
}

</style>
