<template>
  <Panel :header="$t('لیست ویدیو های دوره')">
    <template #icons>
      <Button
        icon="pi pi-plus"
        :label="$t('افزودن ویدیو')"
        severity="success"
        @click="create()"
      />
    </template>
    <DataTable :value="videos">
      <Column class="w-64" field="headline" :header="$t('عنوان ویدیو')" />
      <Column field="description" :header="$t('description')" />
      <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-pencil"
              rounded
              text
              severity="secondary"
              @click="edit(data)"
            />
            <Button
              @click="remove(data)"
              icon="pi pi-trash"
              rounded
              text
              severity="danger"
              :loading="data.removing"
            />
          </div>
        </template>
      </Column>
      <template #empty>
        <p>{{ store.fetching ? $t("loading") : $t("emptyTable") }}</p>
      </template>
    </DataTable>
  </Panel>
</template>
  

<script setup>
import {
  ref,
  watchEffect,
  reactive,
  defineAsyncComponent,
  inject,
  watch,
} from "vue";
import { useRoute } from "vue-router";
import { useHeadlinesStore } from "@/stores/Headlines";
const store = useHeadlinesStore();
const route = useRoute();
const videos = ref();
const { dialog, confirm, t } = inject("service");
const HeadlineDetail = defineAsyncComponent(() =>
  import("../components/HeadlineDetail.vue")
);
const AddVideo = defineAsyncComponent(() =>
  import("../components/AddVideo.vue")
);
const EditVideo = defineAsyncComponent(() =>
  import("../components/EditVideo.vue")
);

watchEffect(async () => {
  videos.value = await store.index(route.params.id);
});
watch(videos, async () => {
  videos.value = await store.index(route.params.id);
});
const show = (product) => {
  dialog.open(HeadlineDetail, {
    props: { modal: true, closable: true, header: t("پیش نمایش ویدیو") },
    data: {
      product,
    },
  });
};

const create = () => {
  dialog.open(AddVideo, {
    props: { modal: true, closable: true, header: t("افزودن ویدیو") },
    data: {
      produc: route.params.id,
    },
  });
};

const edit = (product) => {
  dialog.open(EditVideo, {
    props: { modal: true, closable: true, header: t("ویرایش ویدیو") },
    data: {
      product,
    },
  });
};

const remove = async (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 () => {
      await store.delete(data.id);
      await store.index(route.params.id);
    },
  });
};
</script>