<template>
  <div 
    class="row no-wrap q-px-md q-py-md justify-between items-center bg-trasparent w100"
    >
    <q-btn
      v-if="showCalendarBtn"
      round unelevated
      :color="calendarActive ? 'primary' : 't-secondary'"
      :class="(calendarActive ? 'text-white' : 'text-grey') + (shadows ? ' shadow-t' : '')"
      class="q-mr-sm"
      @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>

    <div class="w100" style="padding-top: 1px; padding-bottom: 1px;">
      <q-input
        v-model="search"
        clearable
        filled
        bg-color="t-secondary"
        clear-icon="close"
        :placeholder="$t(placeholder)"
        dense
        class="rounded-fix"
        :class="shadows ? 'shadow-t' : ''"
        >
        <template #prepend>
          <q-icon name="mdi-magnify" color="grey"/>
        </template>
      </q-input>
    </div>

    <q-btn
      v-if="showFilterBtn"
      @click="emit('open-filters')"
      round unelevated
      :color="filterActive ? 'primary' : 't-secondary'"
      :class="(filterActive ? 'text-white' : 'text-grey') + (shadows ? ' shadow-t' : '')"
      class="q-ml-sm"
      >
      <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>

    <slot/>
  </div>
</template>

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

  withDefaults(defineProps<{
    placeholder?: string
    showCalendarBtn?: boolean
    showFilterBtn?: boolean
    calendarActive?: boolean,
    filterActive?: boolean,
    calendarBadge?: boolean,
    filterBadge?: boolean,
    shadows?: boolean
  }>(), { 
    placeholder: 'Search...',
    showCalendarBtn: true,
    showFilterBtn: true,
    calendarActive: false,
    filterActive: false,
    calendarBadge: false,
    filterBadge: false,
    shadows: false
  })

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