<template>
  <div class="search-form__wrapper">
    <form
      role="search"
      class="search-form"
      method="get"
      @submit.prevent="openSearchPage"
    >
      <input
        ref="searchInputRef"
        class="search-form__input"
        type="search"
        enterkeyhint="search"
        name="keyword"
        value=""
        autocomplete="off"
        maxlength="2048"
        aria-label="Search"
        placeholder="Search"
      >
      <button
        type="submit"
        aria-label="Search the website"
        class="search-form__button"
      >
        <img src="../assets/search.svg" alt="Search" />
      </button>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useInstantsiteJsApi } from '@lightspeed/crane';

const instantsiteJsApi = useInstantsiteJsApi();
const searchInputRef = ref<HTMLInputElement>();

function openSearchPage() {
  const searchInput = searchInputRef.value;
  instantsiteJsApi?.openSearchPage(searchInput?.value);
}
</script>

<style scoped>
.search-form {
  position: relative;
}

.search-form__wrapper {
  width: 250px;
  margin-right: 10px;
  margin-left: 10px;
}

.search-form__input {
  background-color: #313132;
  color: #f5faff;
  font-size: 16px;
  width: 100%;
  height: 30px;
  padding: 0 40px 0 10px;
  border: 1px solid transparent;
  border-radius: 20px;
  outline: none;

  &::-webkit-search-cancel-button {
    appearance: none;
  }
}

.search-form__button {
  display: flex;
  position: absolute;
  top: 1px;
  right: 8px;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  border: 0 none;
  cursor: pointer;

  img {
    width: 20px;
    height: 20px;
  }
}
</style>
