<template>
  <section class="flex flex-col gap-4">
    <Panel :header="$t('createCourse')">
      <div class="flex">
        <div class="basis-4/6">
          <div class="grid grid-cols-2 gap-7">
            <div class="flex flex-col gap-1">
              <FloatLabel>
                <InputText
                  @change="setSlug"
                  class="w-full"
                  v-model="newCourse.name"
                />
                <label>{{ $t("title") }}</label>
              </FloatLabel>
            </div>

            <div class="flex flex-col gap-1">
              <FloatLabel>
                <Dropdown
                  v-model="language"
                  @change="selectLanguage"
                  :options="['انگلیسی', 'فارسی']"
                  class="w-full"
                />
                <label>{{ $t("زبان آموزش") }}</label>
              </FloatLabel>
            </div>
            <div class="flex flex-col gap-1">
              <FloatLabel>
                <InputText
                type="number"
                  v-model="newCourse.duration"
                  class="w-full"
                  prefix="ساعت"
                />
                <label>{{ $t("مدت زمان دوره (ساعت)") }}</label>
              </FloatLabel>
            </div>

            <div class="flex flex-col gap-1">
              <FloatLabel>
                <Dropdown
                  v-model="level"
                  @change="selectLevel"
                  :options="['مبتدی', 'متوسط', 'پیشرفته']"
                  class="w-full"
                />
                <label>{{ $t("سطح دوره") }}</label>
              </FloatLabel>
            </div>

            <div class="flex flex-col gap-1">
              <FloatLabel>
                <InputNumber
       
                max = "100"
                prefix="%" fluid 
                  class="w-full"
                  v-model="newCourse.completionPercentage"
                />
                <label>{{ $t("درصد تکمیل دوره") }}</label>
              </FloatLabel>
            </div>

            <div class="flex flex-col gap-1">
              <FloatLabel>
                <InputText type="number" class="w-full" v-model="newCourse.countOfVideos" />
                <label>{{ $t("تعداد ویدیو ها") }}</label>
              </FloatLabel>
            </div>

            <div class="flex flex-col gap-1">
              <FloatLabel>
                <InputText type="number" class="w-full" v-model="newCourse.totalFileSize" />
                <label>{{ $t("حجم کل دوره (گیگابایت)") }}</label>
              </FloatLabel>
            </div>

            <div class="flex flex-col gap-1">
              <FloatLabel>
                <InputGroup>
                  <InputText class="pointer-events-none truncate" dir="ltr" />
                  <Button severity="secondary" :loading="saving">
                    <i class="pi pi-image ml-2"></i>
                    <span>{{ $t("chooseImage") }}</span>
                    <input
                      type="file"
                      class="opacity-0 absolute inset-0 cursor-pointer"
                      @input="chooseImage"
                    />
                  </Button>
                </InputGroup>
                <label>{{ imagePlaceholder }}</label>
              </FloatLabel>
            </div>
          </div>
          <div class="w-full mt-7">
            <FloatLabel>
              <Editor
                v-model="newCourse.description"
                placeholder="توضیحات"
                editorStyle="height: 315px"
              />
            </FloatLabel>
          </div>
        </div>

        <div class="basis-2/6 flex flex-col gap-7 ms-7">
          <div class="flex flex-col gap-1" dir="rtl">
            <FloatLabel>
              <InputNumber type="number" class="w-full" v-model="newCourse.price" fluid/>
              <label>{{ $t("قیمت دوره (تومان)") }}</label>
            </FloatLabel>
          </div>

          <Listbox
            listStyle="height:240px"
            emptyMessage="دسته بندی وجود ندارد"
            emptyFilterMessage="دسته بندی وجود ندارد"
            v-model="selectedCategory"
            @change="selectCategory"
            filterPlaceholder=" دسته بندی"
            :options="cities"
            filter
            optionLabel="name"
            class="w-full"
          />

          <Listbox
            listStyle="height:240px"
            emptyMessage="مدرس مورد نظر یافت نشد"
            emptyFilterMessage="مدرس وجود ندارد"
            v-model="selectedteacher"
            @change="selectTeacher"
            filterPlaceholder=" مدرس دوره"
            :options="teachers"
            filter
            optionLabel="name"
            class="w-full"
          />
        </div>
      </div>

 

      <div class="flex pt-4 gap-3 justify-end">

        <Button
        :label="$t('انصراف')"
        icon="pi pi-save"
        severity="secondary"
        :loading="creating"
        @click="cansel"
      />

        <Button
          :label="$t('create')"
          icon="pi pi-save"
          severity="success"
          :loading="creating"
          @click="create(newCourse)"
        />
 
      </div>
    </Panel>

    <Message
      v-if="saving"
      class="absolute right-12 bottom-8"
      icon="pi pi-spinner-dotted"
      severity="info"
      >درحال آپلود تصویر...</Message
    >
  </section>
</template>

<script setup>
import Listbox from "primevue/listbox";

import {
  inject,
  defineAsyncComponent,
  watchEffect,
  ref,
  reactive,
} from "vue";

import { useStaticsStore } from "@/stores/statics";
import { useUploaderStore } from "@/stores/uploader";
import { useProductsStore } from "@/stores/products";
import { useCategoriesStore } from "@/stores/categoreis";
import { useUsersStore } from "../stores/users";
const categoriesStore = useCategoriesStore();
const courseStore = useProductsStore();
const uploadStore = useUploaderStore();
const userStore = useUsersStore();
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const level = ref(null);
const selectedCategory = ref();
const selectedteacher = ref();
const language = ref("");
const saving = ref(false);
const creating = ref(false);
const imagePlaceholder = ref('تصویر')
const selectCategory = () => {
  newCourse.categories = selectedCategory.value.id;
};
const selectTeacher = () => {
  newCourse.teacher = selectedteacher.value.id;
};
watchEffect(async () => {
  const { page = 1, rows = 10 } = route.query;
  const categoriess = await categoriesStore.index(page, rows);
  cities.value = categoriess;
});
watchEffect(async () => {
  await userStore.index();
  console.log(userStore.items.user);
  
  teachers.value = userStore.items.user;
});

const selectLevel = () => {
  newCourse.level = level.value;
};
const selectLanguage = () => {
  newCourse.language = language.value;
};

const cities = ref();
const teachers = ref();

const newCourse = reactive({
  name: "",
  description: "",
  slug: "تست",
  duration: "",
  image: "",
  categories: "",
  price: null,
  teacher: "",
  completionPercentage: null,
  level: "",
  language: "",
  countOfVideos: null,
  totalFileSize: "",
});
const setSlug = () => {
  newCourse.slug = newCourse.name;
};
const chooseImage = async (val) => {
  saving.value = true;
  const uploader = await uploadStore.uploader(val.target.files[0]);
  newCourse.image = uploader.data.url;
 
  val.target.files[0].name ? imagePlaceholder.value = val.target.files[0].name : imagePlaceholder.value = "تصویر" ;

  
  saving.value = false;
  if (uploader.status === 200 || uploader.status === 201) {
    toast.add({
      life: 2000,
      severity: "success",
      summary: t("successful"),
      detail: t("تصویر آپلود شد"),
    });
  } else {
    return toast.add({
      life: 2000,
      severity: "error",
      summary: t("error"),
      detail: t("خطا در بارگذاری تصویر، مجدد تلاش کنید"),
    });
  }

};
const router = useRouter();
const cansel = () => router.back()
const create = async (newCourse) => {
  creating.value = true;
  if (
    newCourse.name === "" ||
    newCourse.description === "" ||
    newCourse.duration === "" ||
    newCourse.categories === "" ||
    newCourse.price === null ||
    newCourse.teacher === "" ||
    newCourse.completionPercentage === null ||
    newCourse.level === "" ||
    newCourse.language === "" ||
    newCourse.countOfVideos === null ||
    newCourse.totalFileSize === ""
  ) {
    creating.value = false;
    return toast.add({
      life: 4000,
      severity: "error",
      summary: t("error"),
      detail: t("تمام فیلد ها را وارد کنید"),
    });
  }
  if (newCourse.image === "" || newCourse.image === null) {
    creating.value = false;
    return toast.add({
      life: 2000,
      severity: "error",
      summary: t("error"),
      detail: t("تصویر دوره را وارد کنید"),
    });
  }
  const creat = await courseStore.create(newCourse);
 

  if (creat.message === "دوره با موفقیت ثبت شد") {
    toast.add({
      life: 2000,
      severity: "success",
      summary: t("successful"),
      detail: t("دوره جدید با موفقیت ایجاد شد"),
    });
    router.push('/courses')
    creating.value = false;
  } else {
    creating.value = false;
    toast.add({
      life: 2000,
      severity: "error",
      summary: t("error"),
      detail: t("مشکل در ایجاد دوره، مجدد تلاش کنید"),
    });
  }

};


const { toast, t } = inject("service");

const store = useStaticsStore();

watchEffect(async () => {
  await store.index();

});
</script>
