<template>
  <div class="search-main">
    <div
      v-if="searchShow"
      class="search-main__decorate"
      @click="onCloseClick"
    />
    <div
      ref="searchRef"
      :class="{'--show': searchShow}"
      class="search-main__input-wrapper"
    >
      <SearchInput
        :key="pageName"
        :placeholder="$t('search_placeholder')"
        class="search-main__input"
        @enter="goToSearch"
        @change="() => isResultShow = true"
        @focus="() => isResultShow = true"
      />
      <LazySearchResult
        v-if="isResultShow"
        class="search-main__result"
      />
    </div>

    <button
      v-if="searchShow"
      :aria-label="$t('close')"
      class="search-main__close _to-sm"
      @click="onCloseClick"
    >
      <UiIcon
        name="close"
        size="24"
      />
    </button>

    <button
      :aria-label="$t('search')"
      class="search-main__mobile-button _to-sm"
      type="button"
      @click="onMobileButtonClick"
    >
      <UiIcon
        name="search"
        size="24"
      />
    </button>
  </div>
</template>

<script setup lang="ts">
import { onClickOutside } from '@vueuse/core';

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

const searchSlug = useSlug();

const searchRef = ref();
const searchShow = ref(false);
const isResultShow = ref(false);

const route = useRoute();
const router = useRouter();

const pageName = computed(() => route.fullPath);

const { scrollLock, scrollUnlock } = useGlobalScrollLock();

watch(() => route.path, (value) => {
  if (value) {
    searchValue.value = value.includes('/search/') ? searchSlug.value : '';
    searchShow.value = false;
    isResultShow.value = false;
  }
}, { immediate: true });

onClickOutside(searchRef, () => {
  isResultShow.value = false;
});

watch(isResultShow, (value) => {
  if (value) {
    scrollLock();
  } else {
    scrollUnlock();
  }
});

const { generateLink } = useGenerateLink();

function goToSearch() {
  if (searchValue.value && searchValue.value.length) {
    router.push({
      path: generateLink(`/search/${searchValue.value}`)
    });
  }
}

function onMobileButtonClick() {
  searchShow.value = true;
  isResultShow.value = true;
}

function onCloseClick() {
  searchShow.value = false;
}
</script>

<style lang="scss">
.search-main {
  @include from-br(sm) {
    display: grid;
  }
}

.search-main__input-wrapper {
  @include from-br(sm) {
    position: relative;
    display: grid;
  }

  @include to-br(sm) {
    display: none;
  }
}

.search-main__input-wrapper.--show {
  @include to-br(sm) {
    display: grid;
    position: fixed;
    z-index: $z-index-popup;
    left: 0;
    top: var(--header-height);
    right: 0;
    padding: 12px var(--container-padding-inline);
    background-color: $search-mobile-bg;
    border-bottom: 1px solid $search-mobile-border;
    backdrop-filter: blur($blur-md);
  }
}

.search-main__close {
  @include to-br(sm) {
    position: absolute;
    top: 16px;
    left: 12px;
    z-index: $z-index-popup + 1;
    padding: 8px;
    border-radius: $radius;
    background-color: $search-close-bg;
    color: $search-close-text;
  }
}

.search-main__decorate {
  @include to-br(sm) {
    position: fixed;
    inset: 0;
    z-index: $z-index-plus;
    background-color: $search-mobile-decorate;
  }
}

.search-main__result {
  @include from-br(sm) {
    position: absolute;
    bottom: -8px;
    transform: translateY(100%);
  }
}

.search-main__mobile-button {
  @include to-br(sm) {
    display: grid;
    place-content: center;
    color: $search-mobile-button;
    transition: var(--transition) opacity;
  }
}

.layout-header.--burger-open .search-main__mobile-button {
  opacity: 0;
}
</style>
