<script setup lang="ts">
import { PhMagnifyingGlass } from '@phosphor-icons/vue'
import { type PropType } from 'vue'

interface FilterItems {
  id: number
  title: string
}

const props = defineProps({
  placeholder: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  readonly: {
    type: Boolean,
    default: false
  },
  filters: {
    type: Array as PropType<FilterItems[]>,
    required: true
  }
})

const emit = defineEmits(['update:keyword', 'update:filters'])

const setKeyword = (event: Event) => {
  emit('update:keyword', (event.target as HTMLInputElement).value)
}

const setFilter = (event: Event) => {
  emit('update:filters', (event.target as HTMLSelectElement).value)
}
</script>

<template>
  <div class="relative w-full overflow-hidden rounded-lg">
    <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
      <PhMagnifyingGlass size="18" class="text-gray-900" weight="regular" />
    </div>
    <input
      @input="setKeyword"
      :placeholder="placeholder"
      :disabled="disabled"
      :readonly="readonly"
      type="text"
      class="w-full px-4 py-2 pl-10 text-sm leading-6 text-gray-900 bg-gray-200 border-0 border-transparent rounded-lg placeholder:text-gray-400 outline-0 focus:outline-0 focus:border-0 focus:ring-0"
    />
    <div class="absolute inset-y-0 right-0 flex items-center">
      <label for="filters" class="sr-only">filters</label>
      <span class="block h-5 border border-gray-600"></span>
      <select
        @change="setFilter"
        id="filters"
        name="filters"
        class="h-full py-0 pl-2 text-sm text-gray-900 bg-gray-200 border-transparent rounded-lg pr-7 focus:outline-0 focus:border-0 focus:ring-0"
      >
        <option :key="filter.id" :value="filter.id" v-for="filter in filters">
          {{ filter.title }}
        </option>
      </select>
    </div>
  </div>
</template>
