<template>
  <nav class="bg-neutral-700">
    <div class="mx-auto px-4" :class="[showNavbarBreadcrumb? 'min-h-12': 'h-12']">
      <div class="flex justify-between items-center flex-wrap" v-show="showNavbarBreadcrumb">
        <div class="flex flex-1 items-center">
            <h2 class="mr-28 text-2xl font-black text-neutral-10">FILES</h2>
            <ul class="flex justify-center items-center space-x-4 text-xl font-semibold text-neutral-300 cursor-pointer">
              <li @click="switchNavItem($event)">ALL</li>
              <li @click="switchNavItem($event)">DISCOVER</li>
              <li @click="switchNavItem($event)">COMPARE</li>
              <li @click="switchNavItem($event)">DESIGN</li>
          </ul>
        </div>
        <div class="flex justify-end items-center">
          <form role="search">
            <label for="searchFiles" class="mr-4 relative">
              <input type="search" id="searchFiles" placeholder="Search" class="px-5 py-2 w-72 rounded-full text-sm align-middle duration-300 border border-neutral-500 hover:border-neutral-300 focus:outline-none focus:ring focus:border-neutral-300">
              <span class="absolute top-2 bottom-1.5 right-0.5 flex justify-center items-center gap-2">
                <IconSetting class="w-6 h-6 cursor-pointer"></IconSetting>
                <span class="w-px h-6 block after:border after:border-neutral-300 after:content-['']"></span>
                <button class="pr-2 py-1 rounded-r-full">
                  <IconSearch class="w-6 h-6"></IconSearch>
                </button>
              </span>
            </label>
          </form>
          <label class="btn btn-sm btn-neutral cursor-pointer">
            <input id="uploadFiles" class="hidden" type="file">
            upload
          </label>
        </div>
      </div>
    </div>
  </nav>
</template>

<script>
 import filesStore from '@/stores/files.js';
import IconSearch from '@/components/icons/IconSearch.vue';
import IconSetting from '@/components/icons/IconSetting.vue';

export default {
  data() {
    return {
      showNavbarBreadcrumb: false,
      // 之後優化要模組化
      // navViewName: {
      //   files: ['all', 'discover', 'compare', 'design'],
      // },
      navViewName: '',
    };
  },
  setup() {
    const store = filesStore();

    return {
      store,
    }
  },
  components: {
    IconSearch,
    IconSetting,
  },
  mounted() {
    this.showNavbarBreadcrumb = this.$route.matched[0].name !== ('AuthContainer')? true : false;
  },
  methods: {
    switchNavView(name) {
      this.navViewName = name;
    },
    switchNavItem(event) {
      this.store.filesTag = event.target.innerText;
    }
  },
}
</script>

<style scoped>
#searchFiles::-webkit-search-cancel-button{
  appearance: none;
}
</style>
