<template>
  <Panel :header="$t('مدیریت ویدیو ها')">
    <DataTable :value="store.items.courses">
      <Column class="w-16" :header="$t('image')">
        <template #body="{ data: { image } }">
          <Avatar
            :image="image"
            size="large"
            shape="circle"
            class="transition-transform hover:scale-150"
          />
        </template>
      </Column>
      <Column field="name" :header="$t('name')" />
      <Column
        :field="({ categories }) => categories[0].name"
        :header="$t('category')"
      />

      <Column
        :field="({ price }) => numberFormat(price)"
        :header="$t('price')"
      />
      <Column
        :field="({ createdAt }) => jDate(createdAt)"
        :header="$t('createdAt')"
        class="w-28"
      />
      <Column
        :field="({ updatedAt }) => jDate(updatedAt)"
        :header="$t('updatedAt')"
        class="w-32 text-center"
      />
      <Column field="averageRating" :header="$t('امتیاز')" />

      <Column :header="$t('options')" headerClass="w-32">
        <template #body="{ data }">
          <div class="flex justify-end">
            <Button
              icon="pi pi-eye"
              rounded
              text
              severity="secondary"
              @click="show(data)"
            />
            <Button
              icon="pi pi-video"
              rounded
              text
              severity="secondary"
              @click="edit(data)"
            />
          </div>
        </template>
      </Column>

      <template #empty>
        <p>{{ store.fetching ? $t("loading") : $t("emptyTable") }}</p>
      </template>
      <template #footer>
        <Pagination :total="store.total" />
      </template>
    </DataTable>
    <Galleria
      v-model:visible="galleryVes"
      :value="gallery"
      :numVisible="5"
      containerClass="w-1/2"
      circular
      fullScreen
      showItemNavigators
      :showThumbnailNavigators="false"
    >
      <template #item="{ item: { itemImageSrc, alt } }">
        <img :src="itemImageSrc" :alt="alt" class="w-full block" />
      </template>
    </Galleria>
    <Column headerClass="w-32">
      <template #body="{ data }">
        <div class="flex justify-end">
          <Button
            icon="pi pi-eye"
            rounded
            text
            severity="secondary"
            @click="show(data)"
          />
        </div>
      </template>
    </Column>
  </Panel>
</template>
  
  <script setup>
import { useProductsStore } from "@/stores/products";
import { jDate } from "@/utils/jDate";
import { numberFormat } from "@/utils/numberFormat";
import {
  defineAsyncComponent,
  inject,
  onBeforeMount,
  ref,
  watchEffect,
} from "vue";
import { useRoute, useRouter } from "vue-router";
const ProductDetails = defineAsyncComponent(() =>
  import("../components/ProductDetails.vue")
);

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

const show = (product) => {
  dialog.open(ProductDetails, {
    props: { modal: true, closable: true, header: t("productDetails") },
    data: {
      product,
    },
  });
};


const store = useProductsStore();
const route = useRoute();
const router = useRouter();

const edit = (data) => {
  router.push(`/videos/${data._id}`);
};

const remove = (data) => {
  confirm.require({
    message: t("Are you sure you want to proceed?"),
    header: t("Danger Zone"),
    icon: "pi pi-info-circle",
    acceptClass: "p-button-danger p-button-sm",
    rejectClass: "p-button-secondary p-button-outlined p-button-sm",
    rejectLabel: t("cancel"),
    acceptLabel: t("beOmitted"),
    defaultFocus: "reject",
    accept: async () => {
      const deleted = await store.delete(data._id);

      await store.index();
    },
    //             product.removing = true

    //             const { status, data } = await store.remove(product._id);

    //             product.removing = false

    //             if (status === 200)
    //                 toast.add({
    //                     severity: 'success', summary: t('successful'), detail: t('destroySuccessfully'), life: 3000
    //                 });
    //             else
    //                 toast.add({
    //                     severity: 'error', summary: t('error'), detail: data.msg, life: 3000
    //                 });

    //         },
  });
};

watchEffect(async () => {
  const { page = 1, pageSize = 10 } = route.query;
  await store.index(page, pageSize);
  console.log(store.items);
});

const accepter = async (id, confirmToShow) => {
  const { status, data } = await store.confirm(id, { confirmToShow });

  if (status === 200)
    toast.add({
      severity: "success",
      summary: t("successful"),
      detail: t("destroySuccessfully"),
      life: 3000,
    });
  else
    toast.add({
      severity: "error",
      summary: t("error"),
      detail: data.msg,
      life: 3000,
    });
};
</script>
  
  <style lang="scss" scoped></style>
  