<template>
  <label
    :aria-label="$t('search')"
    :class="{
      'search-input--focused': isFocused,
    }"
    class="search-input"
  >
    <input
      ref="inputRef"
      :value="searchValue"
      :placeholder="placeholder"
      class="search-field__input"
      type="search"
      enterkeyhint="search"
      v-bind="$attrs"
      @input="onInput"
      @focus="onFocus"
      @blur="onBlur"
      @keydown.enter="emit('enter')"
    >
    <button
      :aria-label="$t('search')"
      type="button"
      class="search-field__search"
      @click="emit('enter')"
    >
      <UiIcon
        class="search-field__search-icon"
        name="search"
        size="16"
      />
    </button>
    <button
      v-show="isFilled"
      :aria-label="$t('clear')"
      class="search-field__clear"
      type="button"
      @click="clearValue"
    >
      <UiIcon
        class="search-field__clear-icon"
        name="close"
        size="16"
      />
    </button>
  </label>
</template>

<script setup lang="ts">
const inputRef = ref();

defineExpose({ focus: () => inputRef.value?.focus() });

defineProps<{
  placeholder?: string
}>();

const emit = defineEmits<{
  (eventName: 'focus', event: FocusEvent): void
  (eventName: 'blur', event: FocusEvent): void
  (eventName: 'change'): void
  (eventName: 'enter'): void
}>();

const searchValue = useState('searchValue', () => '');

const isFocused = ref(false);

function onFocus(event: FocusEvent) {
  isFocused.value = true;
  emit('focus', event);
}

function onBlur(event: FocusEvent) {
  isFocused.value = false;
  emit('blur', event);
}

function onInput(event: Event) {
  searchValue.value = (event.target as HTMLInputElement).value;
  emit('change');
}

function clearValue() {
  searchValue.value = '';
  inputRef.value.focus();
}

const isFilled = computed(() => searchValue.value.length > 0);
</script>

<style lang="scss">
$padding-inline: 8px;
$icon-size: 16px;

.search-input {
  position: relative;
  display: block;
  border-radius: $radius-12;

  @include to-br(sm) {
    background-color: $search-bg--mobile;
    border: 1px solid $search-border--mobile;
    transition: var(--transition) border-color;
  }

  @include from-br(sm) {
    background-color: $search-bg;
    border: 1px solid $search-border;
    transition: var(--transition) border-color;
  }
}

.search-field__input {
  font-size: inherit;
  background-color: transparent;
  width: 100%;
  padding-left: 16px;
  padding-right: 80px;
  padding-block: 12px;

  @include to-br(sm) {
    --input-autofill-text: #{$search-text--mobile};

    color: $search-text--mobile;
  }

  @include from-br(sm) {
    @include font-sm;

    --input-autofill-text: #{$search-text};

    color: $search-text;
  }
}

.search-input.search-input--focused {
  border-color: $search-border--active--mobile;

  @include from-br(sm) {
    border-color: $search-border--active;
  }
}

.search-field__input::placeholder {
  @include to-br(sm) {
    color: $search-placeholder--mobile;
  }

  @include from-br(sm) {
    @include font-sm;

    color: $search-placeholder;
  }
}

.search-field__search {
  display: grid;
  place-content: center;
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  color: $input-text;
  padding: 10px;
  background-color: $search-button-bg;
  border-radius: $radius-md;

  @include from-br(sm) {
    cursor: pointer;
  }

  @include hover(background-color) {
    background-color: $search-button-bg--hover;
  }
}

.search-input .search-field__search.search-field__search--show {
  @include from-br(sm) {
    display: grid;
  }
}

.search-field__search-icon {
  color: $search-input-icon;
}

.search-field__clear {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 48px;
  display: grid;
  place-content: center;
  color: $search-input-clear;
  padding: 4px;

  @include hover(color) {
    color: $search-input-clear--hover;
  }
}
</style>
