<template>
  <section class="flex flex-col gap-4">
    <Panel :header="$t('ویرایش دوره')">
      <div class="grid grid-cols-3 gap-7">
        <div class="flex flex-col gap-1">
          <FloatLabel>
            <InputText class="w-full" v-model="course.name" />
            <label>{{ $t("title") }}</label>
          </FloatLabel>
        </div>

        <div class="flex flex-col gap-1">
          <FloatLabel>
            <InputText class="w-full" v-model="course.language" />
            <label>{{ $t("زبان آموزش") }}</label>
          </FloatLabel>
        </div>
        <div class="flex flex-col gap-1">
          <FloatLabel>
            <InputText class="w-full" v-model="course.duration" />
            <label>{{ $t("مدت زمان دوره") }}</label>
          </FloatLabel>
        </div>

        <div class="flex flex-col gap-1">
          <FloatLabel>
            <Dropdown
              :options="levels"
              :optionLabel="levels"
              :optionValue="levels"
              v-model="course.level"
              class="w-full"
            />
            <label>{{ $t("سطح دوره") }}</label>
          </FloatLabel>
        </div>
        <div class="flex flex-col gap-1">
          <FloatLabel>
            <InputText class="w-full" v-model="course.teacher.name" />
            <label>{{ $t("مدرس دوره") }}</label>
          </FloatLabel>
        </div>

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

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

        <div class="flex flex-col gap-1">
          <FloatLabel>
            <InputText class="w-full" v-model="course.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">
                <i class="pi pi-image ml-2"></i>
                <span>{{ $t("chooseImage") }}</span>
                <input
                :value="course.image"
                  type="file"
                  class="opacity-0 absolute inset-0 cursor-pointer"
                  accept="image/*"
           
                />
              </Button>
            </InputGroup>
            <label>{{ $t("image") }}</label>
          </FloatLabel>
        </div>
      </div>

      <div class="flex w-full mt-7">
        <div class="basis-4/6">
          <FloatLabel>
            <Editor
              v-model="course.description"
              placeholder="توضیحات"
              editorStyle="height: 320px"
            />
          </FloatLabel>
        </div>

        <div class="basis-2/6 ms-8">
          <div class="card flex flex-col gap-2 justify-center ">
            <Listbox
              listStyle="height:240px"
              emptyMessage="دسته بندی وجود ندارد"
              emptyFilterMessage="دسته بندی وجود ندارد"
              filterPlaceholder=" دسته بندی"
              :options="cities"
              filter
              optionLabel="name"
              class="w-full"
            />
          </div>
          <div></div>
        </div>
      </div>

      <div class="flex pt-4 justify-end">
        <Button
          :label="$t('edit')"
          icon="pi pi-save"
          severity="success"
          :loading="saving"
          @click="create(course)"
        />
      </div>
    </Panel>
  </section>
</template>
<script setup>
import { useProductsStore } from "@/stores/products";
import { ref, watchEffect, reactive } from "vue";

const store = useProductsStore();
const data = ref(null);
const course = reactive({
  id: "",
  name: "",
  description: "",
  slug: "",
  duration: "",
  image: "",
  categories: "",
  price: 0,
  teacher: "",
  completionPercentage: 0,
  level: "",
  language: "",
  countOfVideos: 0,
  totalFileSize: "",
});
import { useRoute } from "vue-router";

const route = useRoute();

watchEffect(async () => {
  data.value = await store.edit(route.params.id);

  course.id = data.value.course.id;
  course.name = data.value.course.name;
  course.description = data.value.course.description;
  course.slug = data.value.course.slug;
  course.duration = data.value.course.duration;
  course.image = data.value.course.image;
  course.categories = data.value.course.categories;
  course.price = data.value.course.price;
  course.teacher = data.value.course.teacher;
  course.completionPercentage = data.value.course.completionPercentage;
  course.level = data.value.course.level;
  course.language = data.value.course.language;
  course.countOfVideos = data.value.course.countOfVideos;
  course.totalFileSize = data.value.course.totalFileSize;
});

// const levels = reactive(["آسان", "متوسط", "سخت"]);

const chooseImage = async (el) => {
  //   const uploader = await uploadStore.uploader(el.target.value);
  //   //console.log('uploader', uploader.data.url);
  //   newCourse.image = uploader.data.url;
  //   console.log("تصویر آپلود شد");
  //   console.log('upldr',uploader);
};

const create = async (data) => {};
</script>