<script setup>
import { transl } from "./Component";
import { ref, computed } from "vue";

import DashboardLayout from "@/Layouts/DashboardLayout.vue";
import DepartmentSelector from "@/Components/App/DepartmentSelector.vue";
import MainRoleSelector from "@/Components/App/MainRoleSelector.vue";
import SkillRole  from "@/Components/App/SkillsRole.vue";
import PageHeader from "@/Components/Dashboard/PageHeader.vue";
import GoogleIcon from "@/Components/Shared/GoogleIcon.vue";

defineEmits(["select"]);

const props = defineProps({
  mainRoleSkills: Object,
  departments: Object,
  mainRoles: Object,
  skills: Object,
  scores: Object,
});

const selectedDepartment = ref(null);
const selectedRole = ref(null);

const filteredMainRoleSkills = computed(() => {
  if (!props.mainRoleSkills?.data || !selectedRole.value) {
    return [];
  }

  return props.mainRoleSkills.data.filter(roleSkill =>
    roleSkill.main_role_id === selectedRole.value.id
  );
});

const handleDepartmentSelect = (department) => {
  selectedDepartment.value = department;
  selectedRole.value= null;
};
const handleRoleSelect = (role) => {
  selectedRole.value = role;
};

const handleSkillSelect = (roleSkill) => {
  console.log('Habilidad de rol seleccionada:', roleSkill);
}

const goBack = () => {
  if (selectedRole.value) {
    selectedRole.value = null;
  } else if (selectedDepartment.value) {
    selectedDepartment.value = null;
  }
};
</script>

<template>
  <DashboardLayout :title="transl('system')">
    <PageHeader>
      <button @click="goBack">
        <GoogleIcon
          :title="$t('return')"
          class="btn-icon-primary"
          name="arrow_back"
          outline
        />
      </button>
    </PageHeader>

    <!-- Selector de Departamento -->
    <DepartmentSelector
      v-if="!selectedDepartment"
      :departments="departments"
      @select="handleDepartmentSelect"
    />

    <!-- Selector de Roles Principales -->
    <MainRoleSelector
      v-if="selectedDepartment"
      :selectedDepartment="selectedDepartment"
      :mainRoles="mainRoles"
      @select="handleRoleSelect"
    />

    <SkillRole
      v-if="selectedRole"
      :mainRoleSkills="filteredMainRoleSkills"
      :selectedRole="selectedRole"
      @select="handleSkillSelect"
    />
  </DashboardLayout>
</template>
