<template>
  <AisInput
      ref="input"
      type="text"
      icon="search"
      v-model="model"
      v-bind="props"
  >
    <template #status>
      <div v-if="clearable" class="ebttn right">
        <AisIconButton @click="handleClick"
          icon="close"
          label="Clear search"
          size="md"
          hover press
          class="focus:text-danger hover:text-danger"
        />
      </div>
    </template>
  </AisInput>
</template>

<script setup>
  import AisInput from "@c/input/AisInput.vue";
  import AisIconButton from "@c/icon-button/AisIconButton.vue";

  import {ref, computed} from 'vue'
  import { useVModel } from '@vueuse/core'
  import {inputProps} from "@/components/input/input-props";

  const props = defineProps({
    ...inputProps,
  })

  const emit = defineEmits([
    'update:modelValue',
    'clear'
  ])

  const input = ref(null)
  const model = useVModel(props, 'modelValue', emit)
  const clearable = computed(() => !!model.value)

  const handleClick = (e) => {
    let oldValue = model.value
    model.value = ''
    emit('clear', oldValue)
    input.value.focus()
  }

  const focus = () => input.value.focus()
  defineExpose({ focus })
</script>
