<template>
  <div class="flex relative mx-auto w-full max-w-md">
    <label for="navSearchField" class="sr-only">{{ defaultPlaceHolder }}</label>
    <input
      class="
        border-2 border-primary
        bg-red
        transition
        h-12
        px-5
        pr-16
        rounded-md
        focus:outline-none
        w-full
        text-black text-lg
      "
      type="search"
      name="search"
      id="navSearchField"
      dir="auto"
      :placeholder="defaultPlaceHolder"
      v-model="search"
      @keyup.enter="enter"
    />
    <button type="submit" class="absolute right-2 top-3 mr-4">
      <svg
        class="text-black h-6 w-4 fill-current"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        version="1.1"
        id="Capa_1"
        x="0px"
        y="0px"
        viewBox="0 0 56.966 56.966"
        style="enable-background: new 0 0 56.966 56.966"
        xml:space="preserve"
        width="512px"
        height="512px"
      >
        <path
          d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z"
        />
      </svg>
    </button>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { useI18n } from "vue-i18n";
import RouteName from "../router/name";

export default defineComponent({
  props: {
    placeholder: {
      required: false,
      type: String,
    },
  },
  setup(props) {
    const search = "";
    const { t } = useI18n({ useScope: "global" });

    const defaultPlaceHolder = props.placeholder || t("Search");
    return { search, defaultPlaceHolder };
  },
  methods: {
    async enter(): Promise<void> {
      this.$emit("navbar-search");
      await this.$router.push({
        name: RouteName.SEARCH,
        query: { term: this.search },
      });
    },
  },
});
</script>

<style lang="scss">
label span.visually-hidden {
  display: none;
}

input.searchField {
  box-shadow: none;
  border-color: #b5b5b5;

  &::placeholder {
    color: gray;
  }
}
</style>
