<template>
  <header
    :class="[
      'bg-green-600 h-16 flex items-center fixed w-full z-50 transition-transform duration-300 ease-in-out',
      headerStore.shouldShowHeader ? 'translate-y-0' : '-translate-y-full'
    ]"
  >
    <button
      @click="$emit('menu-click')"
      :class="[
        'ml-4 text-white p-2',
        showMenuButton ? '' : 'md:hidden'
      ]"
    >
      <Bars3Icon class="h-6 w-6" />
    </button>
    <div class="flex items-center flex-1">
      <router-link to="/" class="ml-4">
        <img src="/img/mangarr_logo.png" alt="Mangarr" class="h-10" />
      </router-link>
      <SearchBar />
    </div>
    <button
      @click="toggleDarkMode"
      class="mr-4 text-white p-2 hover:text-green-200 transition-colors"
      :title="isDark ? 'Passer en mode clair' : 'Passer en mode sombre'"
    >
      <SunIcon v-if="isDark" class="h-6 w-6" />
      <MoonIcon v-else class="h-6 w-6" />
    </button>
  </header>
</template>

<script setup>
import { computed } from 'vue';
import { Bars3Icon, SunIcon, MoonIcon } from '@heroicons/vue/24/outline';
import { useHeaderStore } from '../../stores/headerStore';
import { useUserPreferencesStore } from '../../../domain/setting/application/store/userPreferencesStore';
import SearchBar from './SearchBar.vue';

const headerStore = useHeaderStore();
const preferencesStore = useUserPreferencesStore();

const isDark = computed(() => {
    if (preferencesStore.theme === 'dark') return true;
    if (preferencesStore.theme === 'light') return false;
    return window.matchMedia('(prefers-color-scheme: dark)').matches;
});

function toggleDarkMode() {
    preferencesStore.setTheme(isDark.value ? 'light' : 'dark');
}

defineProps({
  showMenuButton: {
    type: Boolean,
    default: false
  }
});

defineEmits(['menu-click']);
</script>
