<template>
  <div class="caption full-height flex items-center justify-center" data-test-id="files-empty">
    <div class="flex column caption__box" v-if="isStorageEmpty">
      <div class="q-mb-md">
        <BoxIcon />
      </div>
      <div>This storage is empty</div>
    </div>
    <div class="flex column caption__box" v-if="isFolderEmpty">
      <div class="q-mb-md">
        <EmptyFolderIcon />
      </div>
      <div>Folder is empty</div>
    </div>
    <div class="caption__inscription" v-if="isNothingFound">Nothing found</div>
  </div>
</template>

<script>
import { mapGetters } from 'pinia'
import { useFilesStore } from '../store/index-pinia'

import BoxIcon from './icons/BoxIcon'
import EmptyFolderIcon from "./icons/EmptyFolderIcon";

export default {
  name: 'FilesCaptions',
  components: {
    BoxIcon,
    EmptyFolderIcon
  },
  computed: {
    ...mapGetters(useFilesStore, [
      'downloadFiles',
      'fileList',
      'folderList',
      'searchText',
      'currentStorage',
      'loadingStatus',
      'currentPath',
      'downloadFiles'
    ]),
    isFolder() {
      return Array.isArray(this.currentPath)
    },
    isFolderEmpty() {
      return (
        !this.loadingStatus &&
        this.isNoFiles &&
        !this.searchText &&
        this.isFolder &&
        !this.downloadFiles.length &&
        this.currentPath.length > 0
      )
    },
    isNothingFound() {
      return (
        !this.loadingStatus &&
        this.isNoFiles &&
        this.searchText &&
        !this.downloadFiles.length
      )
    },
    isStorageEmpty() {
      return (
        this.isNoFiles &&
        this.currentPath?.length === 0 &&
        !this.isFolderEmpty &&
        !this.isNothingFound &&
        !this.downloadFiles.length
      )
    },
    isNoFiles() {
      return !this.fileList.length && !this.folderList.length
    },
  },
}
</script>

<style lang="scss" scoped>
.caption {
  font-size: 16px;
  line-height: 16px;
  text-align: center;
  color: #969494;
}
</style>
