<template>
  <header>
    <img src="../icons/logo inpulse.png" alt="INPulse Logo">
    <div class="header-buttons">
      <div class="menu">
        <button class="contact-button" @click="toggleDropdown">Contact</button>
        <div class="contact-dropdown" v-bind:class="{ 'dropdown-visible': isDropdownOpen }">
          <button @click="contactAll">Contact All</button>
          <button v-for="(email, index) in entrepreneurEmails" :key="index">
            {{ email }}
          </button>
        </div>
        <button class="return-button"><a href="/">Return to list project</a></button>
      </div>
    </div>
  </header>
</template>


<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";

const isDropdownOpen = ref(false);
const entrepreneurEmails = ref([]);

const toggleDropdown = () => {
  isDropdownOpen.value = !isDropdownOpen.value;
  console.log("Dropdown toggled:", isDropdownOpen.value); // for debug purposes
};

const fetchEntrepreneurs = async () => {
  try {
    const response = await axios.get("http://localhost:5000/entrepreneurs");
    entrepreneurEmails.value = response.data.map(e => e.email);
  } catch (error) {
    console.error("Erreur lors de la récupération des entrepreneurs:", error);
  }
};

const contactAll = () => {
  alert("Contacter tous les entrepreneurs : " + entrepreneurEmails.value.join(", "));
};

onMounted(fetchEntrepreneurs);
</script>


<style scoped>
@import "@/components/canvas/style-project.css";

header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px;
}

.header-buttons {
  display: flex;
  align-items: flex-start;
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-button, .return-button {
  background-color: #000;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
}

.return-button a {
  color: white;
  text-decoration: none;
}

.contact-dropdown {
  display: none;
  position: absolute;
  background-color: white;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 10px;
  margin-top: 5px;
  z-index: 1000;
}

.contact-dropdown button {
  display: block;
  width: 100%;
  padding: 5px;
  text-align: left;
  border: none;
  background: none;
  cursor: pointer;
}

.contact-dropdown button:hover {
  background-color: #f0f0f0;
}

.dropdown-visible {
  display: block;
}

header img {
  width: 100px;
  height: auto;
}
</style>
