<script setup lang="ts">
import { useDocumentStore } from '@/stores/documents'
import { ref } from 'vue'

const documentStore = useDocumentStore()
const searchQuery = ref<string>('')
const showSearchInput = ref<boolean>(false)

const toggleSearchInput = () => {
  showSearchInput.value = !showSearchInput.value
  if (!showSearchInput.value) {
    searchQuery.value = ''
  }
}

const executeSearch = (ev: InputEvent) => {
  // FIXME: Make reactive instead of this update handler
  const query = (ev.target as HTMLInputElement).value
  console.log('Searching', query)
  documentStore.setFilter(query)
  console.log('Filtered')
}
</script>

<template>
  <div class="actions-container">
    <div class="actions-list">
      <UploadButton />
      <!--

      <a-tooltip title="Upload folder from disk">
        <a-button @click="uploadFolderHandler" type="text" class="action-button" :icon="h(FolderAddFilled)" />
      </a-tooltip>

      <a-tooltip title="Create file">
        <a-button @click="createFileHandler" type="text" class="action-button" :icon="h(FileFilled)" />
      </a-tooltip>

      <a-tooltip title="Create folder">
        <a-button @click="createFolderHandler" type="text" class="action-button" :icon="h(FolderFilled)" />
      </a-tooltip>

      <template v-if="documentStore.selected.size > 0">
        <a-tooltip title="Share">
          <a-button type="text" @click="share" class="action-button" :icon="h(LinkOutlined)" />
        </a-tooltip>
        <a-tooltip title="Download Zip">
          <a-button type="text" @click="download" class="action-button" :icon="h(DownloadOutlined)" />
        </a-tooltip>
        <a-tooltip title="Delete">
          <a-button type="text" @click="deleteHandler" class="action-button" :icon="h(DeleteOutlined)" />
        </a-tooltip>
      </template>
      -->
    </div>
    <div class="actions-list">
      <LoginModal></LoginModal>
      <template v-if="showSearchInput">
        <input type="search" v-model="searchQuery" class="margin-input" />
      </template>
      <!--

      <a-tooltip title="Search">
        <a-button @click="toggleSearchInput" type="text" class="action-button" :icon="h(SearchOutlined)" />
      </a-tooltip>

      <a-tooltip title="Create new view">
        <a-button @click="newViewHandler" type="text" class="action-button" :icon="h(PlusSquareOutlined)" />
      </a-tooltip>

      <a-tooltip title="Preferences">
        <a-button @click="preferencesHandler" type="text" class="action-button" :icon="h(SettingOutlined)" />
      </a-tooltip>

      <a-tooltip title="About">
        <a-button @click="about" type="text" class="action-button" :icon="h(InfoCircleOutlined)" />
      </a-tooltip>
      -->
    </div>
  </div>
</template>

<style>
.actions-container,
.actions-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 15px;
}

.actions-container {
  justify-content: space-between;
}

.action-button {
  padding: 0;
  font-size: 1.5em;
  color: var(--secondary-color);

  &:hover {
    color: var(--blue-color) !important;
  }
}

@media only screen and (max-width: 600px) {
  .actions-container,
  .actions-list {
    gap: 6px;
  }
}
.margin-input {
  margin-top: 5px;
}

.path {
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.15);
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  z-index: 1;
  flex: 0 0 1.5rem;
  order: 1;
  font-size: 0.9rem;
  position: relative;
}
</style>
