<script setup>
import { ref, watch } from "vue";
import { useQuasar } from "quasar";
import { fs, query } from "@hostlink/light";
const props = defineProps({
  current_location: String,
  allow_cross_fs: Boolean
});
const emit = defineEmits(["selected"]);
const protocolMatch = props.current_location.match(/^([a-zA-Z0-9]+):\/\/(.*)$/);
const filesystem = ref(protocolMatch ? protocolMatch[1] : "");
const fss = await query({
  app: {
    fs: {
      list: true
    }
  }
}).then((res) => res.app.fs.list.map((f) => ({ label: f.name, value: f.name + "://" })));
const data = await query({
  app: {
    fs: {
      node: {
        __args: {
          location: props.current_location
        },
        __on: {
          __typeName: "Folder",
          children: {
            __typename: true,
            __on: {
              __typeName: "Folder",
              name: true,
              location: true
            }
          }
        }
      }
    }
  }
}).then((res) => res.app.fs.node.children.filter((n) => n.__typename === "Folder"));
const folders = ref(data);
const mode = ref("move");
const folder = ref(props.current_location);
const qua = useQuasar();
watch(filesystem, async () => {
  console.log(filesystem.value);
  folder.value = filesystem.value;
});
watch(folder, async () => {
  folders.value = await query({
    app: {
      fs: {
        node: {
          __args: {
            location: folder.value
          },
          __on: {
            __typeName: "Folder",
            children: {
              __typename: true,
              __on: {
                __typeName: "Folder",
                name: true,
                location: true
              }
            }
          }
        }
      }
    }
  }).then((res) => res.app.fs.node.children.filter((n) => n.__typename === "Folder"));
});
const newFolder = ref(null);
const onClickCreate = async () => {
  let f = folder.value + "/" + newFolder.value;
  fs.createFolder(f);
  folder.value = f;
  mode.value = "move";
};
const menu = ref(null);
const onClickMove = async () => {
  qua.dialog({
    title: "Move",
    message: 'Are you sure you want to move to "' + folder.value + '" ?',
    cancel: true,
    persistent: true
  }).onOk(async () => {
    menu.value.hide();
    emit("selected", folder.value);
  });
};
</script>

<template>
  <q-menu transition-show="jump-down" transition-hide="jump-up" ref="menu">
    <q-card>
      <q-card-section v-if="allow_cross_fs">
        <q-select label="Filesystem" :options="fss" v-model="filesystem" dense emit-value map-options />
      </q-card-section>
      <q-toolbar>
        <template v-if="mode == 'create'">
          <q-btn flat dense round @click="mode = 'move'" icon="sym_o_arrow_back" class="q-mr-sm">
            <q-tooltip>Cancel</q-tooltip>
          </q-btn>

        </template>
        <template v-else>
          <l-file-manager-breadcrumbs v-model="folder" />

        </template>

      </q-toolbar>

      <template v-if="mode == 'empty folder'">
        <q-card-section> Empty folder</q-card-section>
      </template>

      <template v-if="mode == 'create'">
        <q-card-section>
          <q-input outlined dense v-model="newFolder" :hint="`Create folder at ${folder}`" label="Foler name"
            stack-label="">
            <template v-slot:append v-if="newFolder">
              <q-btn round dense flat icon="sym_o_add" @click="onClickCreate">
                <q-tooltip>Create</q-tooltip>
              </q-btn>
            </template>
          </q-input>
        </q-card-section>
      </template>

      <template v-if="mode == 'move'">
        <q-list>
          <q-item v-for="(b, index) in folders" :key="index" clickable @click="folder = b.location;">

            <q-item-section avatar>
              <q-icon name="sym_o_folder"></q-icon>
            </q-item-section>
            <q-item-section>
              <q-item-label>{{ b.name }}</q-item-label>
            </q-item-section>

            <q-item-section side avatar>
              <q-icon name="sym_o_navigate_next"></q-icon>
            </q-item-section>
          </q-item>
        </q-list>
      </template>

      <q-card-actions>
        <q-btn flat dense @click="mode = 'create'" :disable="mode == 'create'" round icon="sym_o_create_new_folder">
          <q-tooltip> Create new folder</q-tooltip>
        </q-btn>
        <q-space></q-space>
        <q-btn dense label="Move to here" color="primary" v-if="mode == 'empty folder'">
        </q-btn>
        <q-btn dense label="Move" outline color="primary" v-if="mode == 'move'" @click="onClickMove"></q-btn>
      </q-card-actions>
    </q-card>
  </q-menu>
</template>
