<script setup>
import { transl, can, goTo } from "./Component";
import { ref, computed } from "vue";
import { Link } from "@inertiajs/vue3";

import ModalController from "@/Controllers/ModalController.js";
import SearcherController from "@/Controllers/SearcherController.js";

import SearcherHead from "@/Components/Dashboard/Searcher.vue";
import Table from "@/Components/Dashboard/Table.vue";
import GoogleIcon from "@/Components/Shared/GoogleIcon.vue";
import DashboardLayout from "@/Layouts/DashboardLayout.vue";
import DestroyView from "./Destroy.vue";
import EditView from "./Edit.vue";

const props = defineProps({
  mainRoleSkills: Object,
});

// Controladores
const Modal = new ModalController();
const Searcher = new SearcherController(goTo("index"));

// Variables de controladores
const destroyModal = ref(Modal.destroyModal);
const editModal = ref(Modal.editModal);
const modelModal = ref(Modal.modelModal);
const query = ref(Searcher.query);

const groupedRoles = computed(() => {
  const groups = {};
  props.mainRoleSkills.data?.forEach(item => {
    const key = item.main_role?.id;
    if(!groups[key]) groups[key] = { ...item, skills: []};
    groups[key].skills.push(item);
  })
  return Object.values(groups);
});
</script>

<template>
  <DashboardLayout :title="transl('system')">
    <SearcherHead @search="Searcher.search">
      <Link v-if="can('create')" :href="route(goTo('create'))">
        <GoogleIcon
          :title="$t('crud.create')"
          class="btn-icon-primary"
          name="add"
          outline
        />
      </Link>
    </SearcherHead>
    <div class="pt-2 w-full">
      <Table
        :items="mainRoleSkills"
        @send-pagination="Searcher.searchWithPagination"
      >
        <template #head>
          <th class="table-item" v-text="$t('Departamento')" />
          <th class="table-item" v-text="$t('Rol Principal')" />
          <th class="table-item" v-text="$t('Habilidades Puntuadas')" />
          <th class="table-item w-44" v-text="$t('actions')" />
        </template>
        <template #body="{ items }">
          <tr v-for="group in groupedRoles" :key="group.main_role.id">
            <td class="table-item border">
              <div class="flex items-center text-sm">
                <div>
                  <p class="font-semibold">
                    {{ group.main_role?.department?.name }}
                  </p>
                </div>
              </div>
            </td>
            <td class="table-item border">
              <div class="flex items-center text-sm">
                <div>
                  <p class="font-semibold">
                    {{ group.main_role?.name }}
                  </p>
                </div>
              </div>
            </td>
            <div>
              <td class="table-item border">
                <div class="flex items-center text-sm">
                  <div>
                    <p v-for="skill in group.skills" :key="skill.id" class="font-semibold">
                      {{ skill.skill?.name }} - {{ skill.score?.alias }}
                    </p>
                  </div>
                </div>
              </td>
            </div>
            <td class="table-item border">
              <div class="flex justify-center space-x-2">
                <GoogleIcon
                  v-if="can('edit')"
                  :title="$t('crud.edit')"
                  class="btn-icon-primary"
                  name="edit"
                  outline
                  @click="Modal.switchEditModal(model)"
                />
                <GoogleIcon
                  v-if="can('destroy')"
                  :title="$t('crud.destroy')"
                  class="btn-icon-primary"
                  name="delete"
                  outline
                  @click="Modal.switchDestroyModal(model)"
                />
              </div>
            </td>
          </tr>
        </template>
        <template #empty>
          <td class="table-item border">
            <div class="flex items-center text-sm">
              <div>
                <p class="font-semibold">
                  {{ $t("registers.empty") }}
                </p>
              </div>
            </div>
          </td>
          <td class="table-item border">-</td>
          <td class="table-item border">-</td>
        </template>
      </Table>
    </div>
    <EditView
      v-if="can('edit')"
      :show="editModal"
      :model="modelModal"
      @switchModal="Modal.switchShowEditModal"
      @close="Modal.switchEditModal"
    />
    <DestroyView
      v-if="can('create')"
      :show="destroyModal"
      :model="modelModal"
      @close="Modal.switchDestroyModal"
    />
  </DashboardLayout>
</template>
