<template>
  <nav class="navbar navbar-expand navbar-dark fixed-top">
    <div class="container">
      <button aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"
              data-bs-target="#navbar-collapse" data-bs-toggle="collapse" type="button">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse navbar-nav fs-5" id="navbar-collapse">
        <router-link class="navbar-brand text-warning fw-bold fs-3" to="/">
          CSGO<span class="text-up text-white fw-bold">WTF</span>
        </router-link>

        <router-link class="nav-link" to="/explore">Explore</router-link>
      </div>

      <form class="d-flex justify-content-end" @keydown.enter.prevent="parseSearch">
        <label for="search">
          <svg class="bi bi-search" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
          </svg>
        </label>

        <input id="search" v-model="data.searchInput" aria-label="Search"
               class="form-control bg-transparent border-0"
               placeholder="SteamID64, Profile Link or Custom URL"
               type="search">
      </form>
    </div>
  </nav>
</template>

<script>
import {reactive} from "vue";
import {useStore} from 'vuex'
import {sanitize} from 'string-sanitizer'
import router from "../router";

export default {
  name: 'Nav',
  setup() {
    const store = useStore()
    const data = reactive({
      searchInput: ''
    })

    const parseSearch = () => {
      const input = data.searchInput
      const customUrlPattern = 'https://steamcommunity.com/id/'
      const profileUrlPattern = 'https://steamcommunity.com/profiles/'
      const id64Pattern = /^\d{17}$/

      store.state.id64 = ''
      store.state.vanityUrl = ''

      if (id64Pattern.test(input)) {
        store.state.id64 = input
      } else if (input.match(customUrlPattern)) {
        store.state.vanityUrl = sanitize(input.split('/')[4].split('?')[0])
      } else if (input.match(profileUrlPattern)) {
        const tmp = input.split('/')[4].split('?')[0]
        if (id64Pattern.test(tmp)) {
          store.state.id64 = tmp
        }
      } else {
        store.state.vanityUrl = sanitize(input)
      }

      if (store.state.id64 !== '' || store.state.vanityUrl !== '') {
        data.searchInput = ''

        if (store.state.id64) {
          router.push(`/player/${store.state.id64}`)
        } else if (store.state.vanityUrl) {
          router.push(`/player/${store.state.vanityUrl}`)
        }
      }

      document.activeElement.blur()
    }

    return {
      data, parseSearch
    }
  }
}
</script>

<style lang="scss" scoped>
nav {
  max-width: 100vw;
  height: 70px;
  width: 100vw;
  background: rgba(16, 18, 26, 1);

  .text-up {
    font-size: 40%;
    vertical-align: top;
  }

  svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
  }

  label {
    padding-top: 6px;
  }

  input[type="search"] {
    min-width: 300px;
    max-width: 300px;

    &:focus {
      box-shadow: 0 4px 2px -2px rgba(95, 120, 146, 0.59);
      transition: .2s ease-in-out;
      transform: scale(.975);
    }

    &::placeholder {
      color: #aaa;
    }
  }
}

@media screen and (max-width: 768px) {
  nav {
    input[type="search"] {
      min-width: 100%;
      max-width: 100%;
      //
      //&:focus {
      //  min-width: 100%;
      //  max-width: 100%;
      //}
    }
  }
}
</style>