<template>
  <employee-template>
    <template #employee-new-action>
      <add-button text="Ajouter" @click="goToEmployee" />
    </template>
    <template #select-filter>
      <filter-table />
    </template>
    <template #employee-other-action>
      <table-action />
    </template>
    <template #employee-table>
      <employee-table
        :data="employeeData"
        :loading="loadingData"
        :pagination="pagination"
        :search="search"
        @view="goToDetails"
        @delete="deleteEmployee"
        @page-change="handleChangePage"
        @search-change="handleSearchChange"
      />
    </template>
  </employee-template>
</template>
<script setup>
import EmployeeTemplate from "@/components/templates/CRM/EmployeeTemplate.vue";
import EmployeeTable from "@/components/molecules/Employees/EmployeeTable.vue";
import addButton from "@/components/molecules/new-button/addButton.vue";
import FilterTable from "@/components/molecules/Tables/FilterTable.vue";
import TableAction from "@/components/molecules/Tables/TableAction.vue";
import { defineProps, defineEmits } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const emit = defineEmits([
  "pushDetails",
  "deleteEmployee",
  "changePage",
  "searchChange",
]);

const props = defineProps({
  employeeData: {
    type: Array,
    default: [],
  },
  loadingData: {
    type: Boolean,
    default: false,
  },
  pagination: {
    type: Object,
    default: null,
  },
  search: {
    type: String,
    default: "",
  },
});

const goToEmployee = () => {
  router.push({
    name: "Creation employé",
  });
};

const goToDetails = (employeeId) => {
  emit("pushDetails", employeeId);
};

const deleteEmployee = (employeeId) => {
  console.log(
    "deleteEmployee called in EmployeePresentation with ID:",
    employeeId
  );
  emit("deleteEmployee", employeeId);
};

const handleChangePage = (page) => {
  console.log(
    "handleChangePage called in EmployeePresentation with page:",
    page
  );
  if (page >= 1 && page <= (props.pagination?.last_page || 1)) {
    console.log("Emitting changePage event from EmployeePresentation:", page);
    emit("changePage", page);
  }
};

const handleSearchChange = (query) => {
  emit("searchChange", query);
};
</script>
