<template>
  <div class="p-3 pt-1 pb-2 rounded-sm border-1 shadow-sm">
    <div class="flex justify-between mt-2">
      <Label>Name</Label>
      <ResetFilter :reset-handler="clearNameFilter" />
    </div>
    <div class="relative w-full max-w-sm items-center mt-2">
      <Input
        id="search"
        type="text"
        placeholder="Search trace name..."
        class="pl-9 shadow-none"
        v-model="tracesStore.tracesFilters.name"
      />
      <span class="absolute start-0 inset-y-0 flex items-center justify-center pl-3">
        <Search class="text-muted-foreground" :size="16" />
      </span>
    </div>

    <DateFilter />

    <DurationFilter />
  </div>
</template>

<script setup lang="ts">
import { Search } from 'lucide-vue-next'

import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import { useTracesStore } from '@/stores/traces'

import ResetFilter from './ResetFilter.vue'
import DurationFilter from './DurationFilter.vue'
import DateFilter from './DateFilter.vue'

const tracesStore = useTracesStore()

function clearNameFilter() {
  tracesStore.setTracesFilters({ name: '' })
}
</script>
