
<template>
  <section class="flex flex-col gap-4 pt-7">
    <div class="flex gap-7">
      <div class="flex flex-col gap-7 items-center">
        <div class="flex flex-col gap-1 w-96">
          <FloatLabel>
            <InputText class="w-full" v-model="headline"/>
            <label>{{ $t("عنوان ویدیو") }}</label>
          </FloatLabel>
        </div>

        <div class="flex flex-col gap-1 w-96">
          <FloatLabel>
            <Textarea v-model="description" rows="3" class="w-full" />
            <label>{{ $t("توضیحات متا") }}</label>
          </FloatLabel>
        </div>

        <div class="flex flex-col gap-1 w-96">
          <FloatLabel>
            <Dropdown
              v-model="type"
              @change="setType"
              :options="['تکمیل شده', 'غیرفعال', 'درحال ضبط', 'به زودی...']"
              :optionLabel="levels"
              :optionValue="levels"
              class="w-full"
            />
            <label>{{ $t("وضعیت ویدیو") }}</label>
          </FloatLabel>
        </div>
      </div>

      <div class="flex flex-col gap-7 items-center">
        <div>
          <div class="card w-[400px]">
            <Toast />
            <FileUpload
              name="demo[]"
              url="/api/upload"
              @upload="onTemplatedUpload($event)"
              :multiple="true"
              accept="image/*"
              :maxFileSize="1000000"
              @select="onSelectedFiles"
            >
              <template
                #header="{
                  chooseCallback,
                  uploadCallback,
                  clearCallback,
                  files,
                }"
              >
                <div
                  class="flex flex-wrap justify-between items-center flex-1 gap-4"
                >
                  <div class="flex gap-2">
                    <Button
                      @click="chooseCallback()"
                      icon="pi pi-images"
                      rounded
                      outlined
                      severity="secondary"
                    ></Button>
                    <Button
                      @click="uploadEvent(uploadCallback)"
                      icon="pi pi-cloud-upload"
                      rounded
                      outlined
                      severity="success"
                      :disabled="!files || files.length === 0"
                    ></Button>
                    <Button
                      @click="clearCallback()"
                      icon="pi pi-times"
                      rounded
                      outlined
                      severity="danger"
                      :disabled="!files || files.length === 0"
                    ></Button>
                  </div>
                  <ProgressBar
                    :value="totalSizePercent"
                    :showValue="false"
                    class="md:w-20rem h-1 w-full md:ml-auto"
                  >
                    <span class="whitespace-nowrap"
                      >{{ totalSize }}B / 1Mb</span
                    >
                  </ProgressBar>
                </div>
              </template>
              <template
                #content="{
                  files,
                  uploadedFiles,
                  removeUploadedFileCallback,
                  removeFileCallback,
                }"
              >
                <div class="flex flex-col gap-8 pt-4">
                  <div v-if="files.length > 0">
                    <h5>Pending</h5>
                    <div class="flex flex-wrap gap-4">
                      <div
                        v-for="(file, index) of files"
                        :key="file.name + file.type + file.size"
                        class="p-8 rounded-border flex flex-col border border-surface items-center gap-4"
                      >
                        <div>
                          <img
                            role="presentation"
                            :alt="file.name"
                            :src="file.objectURL"
                            width="100"
                            height="50"
                          />
                        </div>
                        <span
                          class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden"
                          >{{ file.name }}</span
                        >
                        <div>{{ formatSize(file.size) }}</div>
                        <Badge value="Pending" severity="warn" />
                        <Button
                          icon="pi pi-times"
                          @click="
                            onRemoveTemplatingFile(
                              file,
                              removeFileCallback,
                              index
                            )
                          "
                          outlined
                          rounded
                          severity="danger"
                        />
                      </div>
                    </div>
                  </div>

                  <div v-if="uploadedFiles.length > 0">
                    <h5>Completed</h5>
                    <div class="flex flex-wrap gap-4">
                      <div
                        v-for="(file, index) of uploadedFiles"
                        :key="file.name + file.type + file.size"
                        class="p-8 rounded-border flex flex-col border border-surface items-center gap-4"
                      >
                        <div>
                          <img
                            role="presentation"
                            :alt="file.name"
                            :src="file.objectURL"
                            width="100"
                            height="50"
                          />
                        </div>
                        <span
                          class="font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden"
                          >{{ file.name }}</span
                        >
                        <div>{{ formatSize(file.size) }}</div>
                        <Badge
                          value="Completed"
                          class="mt-4"
                          severity="success"
                        />
                        <Button
                          icon="pi pi-times"
                          @click="removeUploadedFileCallback(index)"
                          outlined
                          rounded
                          severity="danger"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </template>
              <template #empty>
                <div class="flex items-center justify-center flex-col">
                  <i
                    class="pi pi-cloud-upload border-2 rounded-full p-8 text-4xl text-muted-color"
                  />
                  <p class="mt-6 mb-0">ویدیو را اینجا رها کنید</p>
                </div>
              </template>
            </FileUpload>
          </div>
        </div>
      </div>
    </div>

    <div class="w-full flex gap-2 mt-4">
      <Button
        :label="$t('back')"
        outlined
        severity="secondary"
        class="ml-auto"
        @click="dialog.close()"
      />
      <Button
        :label="$t('save')"
        icon="pi pi-save"
        severity="success"
        @click="save()"
        :loading="saving"
      />
    </div>
  </section>
</template>

<script setup>
import { inject, reactive, ref } from "vue";
import { usePrimeVue } from "primevue/config";
import { useToast } from "primevue/usetoast";
import { useHeadlinesStore } from "@/stores/Headlines"
const store = useHeadlinesStore()
const dialog = inject("dialogRef");
const type = ref();
const produc = reactive(Object.assign({}, dialog.value.data));
const sabt = () => {
  console.log(produc);
};
const videoStatus = ref(null);
const setType = () => {
  if (type.value === "غیرفعال") {
    videoStatus.value = "DeActivate";
  }
  if (type.value === "تکمیل شده") {
    videoStatus.value = "Completed";
  }
  if (type.value === "درحال ضبط") {
    videoStatus.value = "Recording";
  }
  if (type.value === "به زودی...") {
    videoStatus.value = "Soon";
  }
  console.log("type:", videoStatus.value, produc.produc);
  console.log(type.value);
};
const headline = ref('');
const description = ref('');
const videoUrl = ref('');
const $primevue = usePrimeVue();
const toast = useToast();

const totalSize = ref(0);
const totalSizePercent = ref(0);
const files = ref([]);
const course = ref(produc.produc)

const save = async() =>{
   const send = await store.create({
        headline: headline.value,
        description: description.value,
        course: produc.produc,
        videoUrl: 'https://dlearn.storage.iran.liara.space/test/1cb985c8-26a0-4120-824c-f496349e45bfmatt_devir--one_minute_drive_preview.webm',
        status: videoStatus.value
    })
    console.log('send', send);
}

const onRemoveTemplatingFile = (file, removeFileCallback, index) => {
  removeFileCallback(index);
  totalSize.value -= parseInt(formatSize(file.size));
  totalSizePercent.value = totalSize.value / 10;
};

const onClearTemplatingUpload = (clear) => {
  clear();
  totalSize.value = 0;
  totalSizePercent.value = 0;
};

const onSelectedFiles = (event) => {
  files.value = event.files;
  files.value.forEach((file) => {
    totalSize.value += parseInt(formatSize(file.size));
  });
};

const uploadEvent = (callback) => {
  totalSizePercent.value = totalSize.value / 10;
  callback();
};

const onTemplatedUpload = () => {
  toast.add({
    severity: "info",
    summary: "Success",
    detail: "File Uploaded",
    life: 3000,
  });
};

const formatSize = (bytes) => {
  const k = 1024;
  const dm = 3;
  const sizes = $primevue.config.locale.fileSizeTypes;

  if (bytes === 0) {
    return `0 ${sizes[0]}`;
  }

  const i = Math.floor(Math.log(bytes) / Math.log(k));
  const formattedSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));

  return `${formattedSize} ${sizes[i]}`;
};
</script>
