<script setup>
import { ref, computed } from "vue";
import { useLight, m, q } from "#imports";
import { fs } from "@hostlink/light";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import { format } from "quasar";
const { humanStorageSize } = format;
const light = useLight();
const i18n = useI18n();
const $q = useQuasar();
const modelValue = defineModel();
const { system, app } = await q({
  system: {
    maxUploadSize: true
  },
  app: {
    drives: {
      index: true,
      name: true
    }
  }
});
const props = defineProps({
  label: { type: String, required: false },
  filled: { type: Boolean, required: false, default: void 0 },
  outlined: { type: Boolean, required: false, default: void 0 },
  standout: { type: Boolean, required: false, default: void 0 },
  rounded: { type: Boolean, required: false, default: void 0 },
  dense: { type: Boolean, required: false, default: void 0 },
  square: { type: Boolean, required: false, default: void 0 },
  stackLabel: { type: Boolean, required: false, default: void 0 },
  path: { type: String, required: false, default: "" },
  accept: { type: String, required: false, default: "*" },
  driveIndex: { type: Number, required: false, default: 0 },
  color: { type: String, required: false }
});
const driveName = computed(() => {
  const drive = app.drives.find((d) => d.index === props.driveIndex);
  return drive?.name ?? "local";
});
const show = ref(false);
const attrs = computed(() => {
  return { ...light.styles.input, ...JSON.parse(JSON.stringify(props)) };
});
const uploadFile = ref(null);
const rename = ref(true);
const onUploadFile = async () => {
  if (!uploadFile.value) {
    $q.dialog({
      title: "Error",
      message: i18n.t("Please select a file"),
      color: "negative"
    });
    return;
  }
  if (uploadFile.value.size > system.maxUploadSize) {
    $q.dialog({
      title: "Error",
      message: "File size is too big. Max size is " + humanStorageSize(system.maxUploadSize),
      color: "negative"
    });
    return;
  }
  $q.loading.show({
    message: i18n.t("Uploading file...")
  });
  try {
    const filename = uploadFile.value.name;
    const basePath = props.path.replace(/^\/+/, "").replace(/\/$/, "");
    const location = basePath ? `${driveName.value}://${basePath}/${filename}` : `${driveName.value}://${filename}`;
    let v = await fs.uploadFile(location, uploadFile.value, rename.value);
    if (v.includes("://")) {
      v = v.split("://")[1];
    }
    modelValue.value = v;
    show.value = false;
    uploadFile.value = null;
  } catch (e) {
    $q.loading.hide();
    $q.dialog({
      title: i18n.t("Error"),
      message: e.message
    });
  }
  $q.loading.hide();
};
</script>

<template>
    <q-input v-bind="attrs" v-model="modelValue" hide-bottom-space>
        <q-dialog v-model="show" persistent transition-show="scale" transition-hide="scale">
            <l-card style="width:300px">
                <q-card-section>
                    <q-file ref="file" v-model="uploadFile" name="file" :label="$t('File')" :accept="accept"
                        :hint="`Max upload size: ${humanStorageSize(system.maxUploadSize)}`"
                        :color="attrs.color"></q-file>
                    <!-- q-checkbox v-model="rename" :label="$t('Rename file if exists')"></q-checkbox-->
                </q-card-section>

                <q-card-actions align="right">
                    <q-btn flat :label="$t('Cancel')" :color="attrs.color" @click="uploadFile = null"
                        v-close-popup></q-btn>
                    <q-btn flat :label="$t('Upload')" :color="attrs.color" @click="onUploadFile"></q-btn>
                </q-card-actions>
            </l-card>
        </q-dialog>
        <template v-slot:prepend>
            <q-btn dense flat round icon="sym_o_file_upload" @click="show = true"></q-btn>
        </template>

        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
            <slot :name="name" v-bind="props ?? {}"></slot>
        </template>
    </q-input>
</template>
