<template>
  <div 
    class="flex row q-mx-sm justify-between items-center no-wrap q-py-sm"
  >
    <q-btn
      v-if="showCalendarBtn"
      flat round
      :color="calendarActive ? 'primary' : 'grey'"
      @click="emit('toggle-calendar')"
      >
      <div>
        <q-icon name="mdi-calendar-month-outline" size="sm"/>
        <q-badge
          color="red"
          rounded
          floating
          transparent
          style="position: relative; top: -6px; margin-left: -12px"
          :style="{ opacity: calendarBadge ? 0.8 : 0 }" 
        />
      </div>
    </q-btn>

    <q-input
      v-model="search"
      clearable
      clear-icon="close"
      borderless
      filled
      :placeholder="$t(placeholder)"
      dense
      class="col-grow q-pt-xs q-mx-sm"
    >
      <template #prepend>
        <q-icon name="mdi-magnify" color="grey"/>
      </template>
    </q-input>

    <q-btn
      v-if="showFilterBtn"
      @click="emit('open-filters')"
      flat round
      :color="filterActive ? 'primary' : 'grey'"
      >
      <div>
        <q-icon name="mdi-filter-outline" size="sm"/>
        <q-badge
          color="red"
          rounded
          floating
          transparent
          style="position: relative; top: -6px; margin-left: -12px"
          :style="{ opacity: filterBadge ? 0.8 : 0 }" 
        />
      </div>
    </q-btn>
  </div>
</template>

<script setup lang="ts">
  const search = defineModel<string>({
    required: true,
    default: ''
  })

  defineProps({
    placeholder: {
      type: String,
      default: 'Search...'
    },
    showCalendarBtn: {
      type: Boolean,
      default: true
    },
    showFilterBtn: {
      type: Boolean,
      default: true
    },
    calendarActive: Boolean,
    filterActive: Boolean,
    calendarBadge: Boolean,
    filterBadge: Boolean
  })

  const emit = defineEmits([
    'toggle-calendar',
    'open-filters'
  ])
</script>
