<script setup>
import { format, useQuasar, date } from "quasar";
import { computed } from "vue";
import { query } from "@hostlink/light";
const { humanStorageSize } = format;
const quasar = useQuasar();
const props = defineProps({
  location: {
    type: String,
    required: true
  }
});
const file = await query({
  app: {
    fs: {
      node: {
        __args: {
          location: props.location
        },
        __typename: true,
        __on: {
          __typeName: "File",
          name: true,
          size: true,
          path: true,
          mimeType: true,
          lastModified: true,
          publicUrl: true
        }
      }
    }
  }
}).then((res) => res.app.fs.node);
const size = humanStorageSize(file.size);
const lastModifiedHuman = date.formatDate(file.lastModified * 1e3, "YYYY-MM-DD HH:mm:ss");
const copyToClipboard = (text) => {
  let urlToCopy = text;
  if (!text.startsWith("https://") && !text.startsWith("http://")) {
    const baseUrl = window.location.origin;
    urlToCopy = baseUrl + (text.startsWith("/") ? text : "/" + text);
  }
  navigator.clipboard.writeText(urlToCopy).then(() => {
    quasar.notify({
      message: "URL copied to clipboard",
      color: "positive",
      position: "top",
      timeout: 1e3
    });
  }, (err) => {
    console.error("Could not copy text: ", err);
  });
};
const isImage = computed(() => {
  return file.mimeType.startsWith("image/");
});
const isVideo = computed(() => {
  return file.mimeType.startsWith("video/");
});
</script>

<template>
  <div>
    <q-img :src="file.publicUrl" v-if="isImage"></q-img>
    <q-video :src="file.publicUrl" v-else-if="isVideo"></q-video>

    <q-list dense>
      <l-item label="Name">{{ file.name }}</l-item>
      <l-item label="Size">{{ size }} ({{ file.size }})</l-item>
      <l-item label="Location">{{ file.path }}</l-item>
      <l-item label="Last modified">{{ lastModifiedHuman }}</l-item>
      <l-item label="MIME type">{{ file.mimeType }}</l-item>

      <q-item>
        <q-item-section side>
          <q-item-label>URL</q-item-label>
        </q-item-section>
        <q-item-section style="align-items: flex-end;">
          <q-item-label lines="1">{{ file.publicUrl }}</q-item-label>
        </q-item-section>

        <q-item-section side>
          <q-btn size="md" flat dense round icon="sym_o_content_copy" @click="copyToClipboard(file.publicUrl)"></q-btn>
        </q-item-section>
      </q-item>
    </q-list>
  </div>
</template>
