<script setup>
import { ref, computed } from "vue";
import { m, q, useAsyncData } from "#imports";
import { useQuasar } from "#imports";
const $q = useQuasar();
const { data: app, refresh } = await useAsyncData(async () => {
  return await q({
    app: {
      fs: {
        list: true,
        types: true
      },
      driveTypes: true
    }
  }).then((res) => res.app);
});
const items = computed(() => app.value.fs.list);
const dialog = ref(false);
const value = ref({});
const onSubmit = async (data) => {
  loading.value = true;
  try {
    if (data.uuid) {
      await m("lightFSupdate", {
        data
      });
    } else {
      await m("lightFSadd", {
        data
      });
    }
    dialog.value = false;
    refresh();
  } catch (e) {
    $q.notify({
      type: "negative",
      message: e.message
    });
  }
  loading.value = false;
};
const onRemove = async (selected2) => {
  $q.dialog({
    title: "Confirm",
    message: "Are you sure you want to delete this file system?",
    ok: "Yes",
    cancel: "No"
  }).onOk(async () => {
    for (let row of selected2) {
      await m("lightFSdelete", {
        uuid: row.uuid
      });
    }
    selected2.value = [];
    refresh();
  });
};
const columns = [
  {
    name: "action"
  },
  /*     {
          name: 'uuid',
          required: true,
          label: 'UUID',
          field: row => row.uuid,
      },
   */
  {
    name: "name",
    required: true,
    label: "Name",
    align: "left",
    field: (row) => row.name,
    format: (val) => `${val}`,
    sortable: true
  },
  {
    name: "type",
    required: true,
    label: "Type",
    align: "left",
    field: (row) => row.type,
    format: (val) => `${val}`,
    sortable: true
  },
  {
    name: "data",
    label: "Data",
    align: "left"
  }
];
const selected = ref([]);
const loading = ref(false);
const getType = (type) => {
  if (!type) return null;
  return app.value.fs.types.find((t) => t.name == type);
};
</script>

<template>
    <l-page title="File system">
        <q-dialog v-model="dialog" persistent>
            <q-card style="width: 500px;">

                <q-toolbar>
                    <q-toolbar-title v-if="value.uuid">{{ $t('Edit File System') }}</q-toolbar-title>
                    <q-toolbar-title v-else>{{ $t('Add File System') }}</q-toolbar-title>
                    <q-space></q-space>
                    <q-btn flat round dense icon="sym_o_close" v-close-popup></q-btn>
                </q-toolbar>

                <form-kit type="l-form" :value="value" @submit="onSubmit" #default="{ value }">
                    <form-kit type="l-input" label="Name" name="name" validation="required"></form-kit>
                    <form-kit type="l-select" label="Type" name="type" validation="required" :options="app.fs.types"
                        option-value="name"></form-kit>

                    <form-kit type="group" name="data" v-if="value.type">
                        <template v-for="(option, name) in getType(value.type).options">
                            <form-kit type="l-input" :name="name" :label="name"
                                :validation="option.required ? 'required' : ''" :help="option.description"
                                :placeholder="option.placeholder"></form-kit>

                        </template>

                    </form-kit>

                </form-kit>

            </q-card>
        </q-dialog>

        <q-table :rows="items" :columns="columns" selection="multiple" flat bordered dense separator="cell"
            v-model:selected="selected" row-key="uuid" :loading="loading">
            <template #top-left>
                <q-btn icon="sym_o_add" @click="value = {
                    data: {}
                }; dialog = true" flat round dense>
                    <q-tooltip>Add File System</q-tooltip>
                </q-btn>
            </template>

            <template #top-selection>
                <q-btn icon="sym_o_delete" @click="onRemove(selected)" flat round dense :disable="selected.length == 0">
                    <q-tooltip>Remove File System</q-tooltip>
                </q-btn>
            </template>

            <template #body-cell-data="props">
                <q-td>
                    <q-list flat dense>
                        <q-item v-for="(value, key) in props.row.data" :key="key">
                            <q-item-section>
                                <q-item-label caption>{{ key }}</q-item-label>
                                <q-item-label>{{ value }}</q-item-label>
                            </q-item-section>
                        </q-item>
                    </q-list>
                </q-td>
            </template>

            <template #body-cell-action="props">
                <q-td auto-width>
                    <q-btn icon="sym_o_edit" @click="value = props.row; dialog = true" flat round dense>
                        <q-tooltip>Edit</q-tooltip>
                    </q-btn>
                </q-td>
            </template>

        </q-table>
    </l-page>
</template>
