
<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="newEpisode.headline"/>
            <label>{{ $t("عنوان ویدیو") }}</label>
          </FloatLabel>
        </div>

        <div class="flex flex-col gap-1 w-96">
          <FloatLabel>
            <Textarea v-model="newEpisode.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">
        <FileUpload mode="advanced" multiple  @select="chooseImages"
                @remove="chooseImages" >
                <template #header="{ chooseCallback }">
                    <div class="flex justify-between w-full items-center">
                        <h2 class="font-bold text-xl ">{{ $t('بارگذاری ویدیو') }}</h2>
                        <Button :label="$t('انتخاب ویدیو')" severity="secondary" icon="pi pi-video" text
                            @click="chooseCallback()" />
                    </div>
                </template>
                <template #content="{ files }">
                    <div v-if="files.length > 0" class="flex gap-4 justify-between ">
                      <div v-if="loading" class="h-[300px] w-[500px] flex justify-center items-center">درحال بارگذاری ویدیو</div>                      
                      <div v-else class="h-[300px] w-[500px] flex justify-center items-center">ویدیو آپلود شد</div>
                    </div>
                </template>



                <template #empty>
                    <div class="flex items-center justify-center flex-col gap-8 py-12 w-[51rem] h-96">
                        <i class="pi pi-video border-2 rounded-full p-5 text-8xl text-400 border-400" />
                        <p>{{ $t('جهت تغییر ویدیو، ویدیو جدید را اینجا رها کنید') }}</p>
                    </div>
                </template>
            </FileUpload>
      </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, watchEffect } from "vue";
import { useHeadlinesStore } from "@/stores/Headlines"
import { useUploaderStore } from "@/stores/uploader";
const loading = ref(false)
const uploadStore = useUploaderStore();
const saving = ref(false)
const store = useHeadlinesStore()
const dialog = inject("dialogRef");
const { toast, t } = inject("service");
const type = ref();
const produc = reactive(dialog.value.data);

const setType = () => {
  if (type.value === "غیرفعال") {
    newEpisode.status = "DeActivate";
  }
  if (type.value === "تکمیل شده") {
    newEpisode.status = "Completed";
  }
  if (type.value === "درحال ضبط") {
    newEpisode.status = "Recording";
  }
  if (type.value === "به زودی...") {
    newEpisode.status = "Soon";
  }

};

const newEpisode = reactive({
  headline: produc.product.headline,
  description: produc.product.description,
  course: produc.product.course,
  videoUrl: produc.product.videoUrl,
  status: produc.product.status
})
watchEffect(() =>{
  if (produc.product.status === "Completed") {
    type.value = 'تکمیل شده'
  }
  if (produc.product.status === "DeActivate") {
    type.value = 'غیر فعال'
  }
  if (produc.product.status === "Recording") {
    type.value = "درحال ضبط"
  }
  if (produc.product.status === "Soon") {
    type.value = "به زودی..."
  }
})

const chooseImages = async(files) => {
loading.value = true
const uploader = await uploadStore.uploader(files.files[0]);
newEpisode.videoUrl = uploader.data.key
loading.value = false

}


const save = async() =>{
  saving.value = true
   const send = await store.edit(produc.product.id, newEpisode)
   console.log(send);
   saving.value = false
   dialog.value.close()
   toast.add({
      life: 2000,
      severity: "success",
      summary: t("successful"),
      detail: t("ویدیو آپدیت شد"),
    });
}



</script>
