<template>
  <div class="filter-bar">
    <div class="filter-bar__input-wrapper">
      <input
        class="filter-bar__search-input skillbox-input"
        type="text"
        placeholder="Suchbegriff eingeben..."
        data-cy="filter-input"
        ref="searchInputRef"
        v-model="searchQuery"
        @input="updateSearchQuery"
      />
      <search-magnifying-glass class="filter-bar__search-icon"></search-magnifying-glass>
    </div>
    <language-switcher
      class="filter-bar__language-selection"
      v-if="$flavor.showLanguageFilter"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import SearchMagnifyingGlass from '@/components/icons/SearchMagnifyingGlass.vue';
import LanguageSwitcher from '@/components/LanguageSwitcher.vue';

const searchQuery = ref('');
const searchInputRef = ref(null);

const emit = defineEmits(['update:searchQuery']);

const updateSearchQuery = () => {
  emit('update:searchQuery', searchQuery.value);
};

onMounted(() => {
  searchInputRef.value?.focus();
});
</script>

<style scoped lang="scss">
@import 'styles/helpers';

.filter-bar {
  display: flex;
  column-gap: $medium-spacing;

  margin-bottom: $medium-spacing;
  flex-direction: column;
  @include desktop {
    flex-direction: row;
  }

  &__input-wrapper {
    position: relative;
    margin-bottom: $medium-spacing;
  }

  &__search-input {
    width: 100%;
    @include desktop {
      width: $medium-input-width;
    }

    border: 1px solid $color-silver;
    outline: 0;
  }

  &__search-icon {
    position: absolute;
    width: $default-icon-dimension;
    height: $default-icon-dimension;
    right: $medium-spacing;
    top: 50%;
    transform: translateY(-50%);
  }

  &__language-selection {
    margin-left: auto;
  }
}
</style>
