<template>
  <base-modal
    title="Gerenciador de arquivos"
    fullHeight
    @close="$emit('close', false)"
    @show-aside="(value) => (aside = value)"
  >
    <template #aside>
      <div class="horizontal-padding-medium vertical-padding-small">
        <div
          v-for="(folderItem, folderIndex) in listFolders"
          :key="folderIndex"
          class="rel flex flex-row flex-nowrap text-medium vertical-padding-small cursor-pointer"
          :class="[
            { 'text-gray': !folderItem.active },
            { 'hover:text-dark': !folderItem.active },
            { 'text-primary': folderItem.active },
            { 'aside-item-nth-3': showFolderIcons },
            { 'aside-item-nth-2': !showFolderIcons },
          ]"
          @click="handleAsideItem(folderIndex)"
        >
          <i :class="folderItem.icon"></i>
          <span class="text-ellipsis left-margin-medium">{{ folderItem.title }}</span>
        </div>
      </div>
    </template>
    <template #asideFooter>
      <div class="padding-medium">
        <base-button
          apperance="outline"
          size="small"
          @click.native="showModal = 'create-folders'"
        >
          Nova pasta
        </base-button>
      </div>
    </template>

    <template #modal>
      <!-- rename-files -->
      <base-modal
        v-if="showModal === 'rename-files'"
        title="Renomear arquivo"
        size="small"
        :overlay="false"
        :disabled="loadingModal"
        @close="closeModal"
      >
        <div class="top-margin-small horizontal-padding-medium">
          <base-input
            size="small"
            v-model="fileName"
            :error="fileNameError"
            :disabled="loadingModal"
            select
          />
        </div>
        <div class="flex flex-row flex-nowrap end-xs padding-medium">
          <base-button
            @click.native="closeModal"
            apperance="outline"
            size="small"
            :disabled="loadingModal"
            class="right-margin-small"
          >
            Cancelar
          </base-button>
          <base-button
            @click.native="renameFiles"
            size="small"
            :disabled="loadingModal || !fileName || fileName === getFileName()"
            :loading="loadingModal"
          >
            Ok
          </base-button>
        </div>
      </base-modal>

      <!-- move-files -->
      <base-modal
        v-if="showModal === 'move-files'"
        title="Mover para"
        size="small"
        :overlay="false"
        :disabled="loadingModal"
        @close="closeModal"
      >
        <div class="files">
          <base-file
            v-for="(file, fileIndex) in selectedFiles"
            :key="fileIndex"
            :thumbnail="file.thumbnail"
            :filename="file.filename"
            :extension="file.ext"
            class="file"
          />
        </div>
        <span class="text-x-small text-gray text-center visible-block">
          {{ totalSelectedFiles }} {{ labelFileOrFiles }}
        </span>
        <div class="top-margin-small bottom-margin-medium horizontal-padding-medium">
          <base-select v-model="to" :disabled="loadingModal">
            <option
              v-for="(folderItem, folderItemKey) in listFolders"
              :key="folderItemKey"
              :disabled="folderItem.name === 'icones'"
              :value="folderItem.directory"
            >
              {{ folderItem.title }}
            </option>
          </base-select>
        </div>
        <div class="flex flex-row flex-nowrap end-xs padding-medium">
          <base-button
            @click.native="closeModal"
            apperance="outline"
            size="small"
            :disabled="loadingModal"
            class="right-margin-small"
          >
            Cancelar
          </base-button>
          <base-button
            @click.native="moveFiles"
            size="small"
            :disabled="loadingModal"
            :loading="loadingModal"
          >
            Ok
          </base-button>
        </div>
      </base-modal>

      <!-- delete-files -->
      <base-modal
        v-if="showModal === 'delete-files'"
        :disabled="loadingModal"
        :title="`Deletar ${totalSelectedFiles} ${labelFileOrFiles}`"
        size="small"
        :overlay="false"
        @close="closeModal"
      >
        <span
          class="text-medium text-gray visible-block top-padding-small horizontal-padding-medium"
        >
          Deseja excluir estes arquivos permanentemente?
        </span>
        <div class="flex flex-row flex-nowrap end-xs padding-medium">
          <base-button
            @click.native="closeModal"
            apperance="outline"
            size="small"
            :disabled="loadingModal"
            class="right-margin-small"
          >
            Não
          </base-button>
          <base-button
            @click.native="deleteFiles"
            size="small"
            :disabled="loadingModal"
            :loading="loadingModal"
          >
            Sim
          </base-button>
        </div>
      </base-modal>

      <!-- rename-folders -->
      <base-modal
        v-if="showModal === 'rename-folders'"
        title="Renomear pasta"
        size="small"
        :overlay="false"
        :disabled="loadingModal"
        @close="closeModal"
      >
        <div class="top-margin-small horizontal-padding-medium">
          <base-input
            size="small"
            v-model="folderName"
            :error="folderNameError"
            :disabled="loadingModal"
            select
          />
        </div>
        <div class="flex flex-row flex-nowrap end-xs padding-medium">
          <base-button
            @click.native="closeModal"
            apperance="outline"
            size="small"
            :disabled="loadingModal"
            class="right-margin-small"
          >
            Cancelar
          </base-button>
          <base-button
            @click.native="renameFolders"
            size="small"
            :disabled="loadingModal || !folderName || folderName === activeFolder.title"
            :loading="loadingModal"
          >
            Ok
          </base-button>
        </div>
      </base-modal>

      <!-- create-folders -->
      <base-modal
        v-if="showModal === 'create-folders'"
        title="Nova pasta"
        size="small"
        :overlay="false"
        :disabled="loadingModal"
        @close="closeModal"
      >
        <div class="top-margin-small horizontal-padding-medium">
          <base-input
            size="small"
            v-model="folderName"
            :error="folderNameError"
            :disabled="loadingModal"
            select
          />
        </div>
        <div class="flex flex-row flex-nowrap end-xs padding-medium">
          <base-button
            @click.native="closeModal"
            apperance="outline"
            size="small"
            :disabled="loadingModal"
            class="right-margin-small"
          >
            Cancelar
          </base-button>
          <base-button
            @click.native="createFolders"
            size="small"
            :disabled="loadingModal || !folderName"
            :loading="loadingModal"
          >
            Criar
          </base-button>
        </div>
      </base-modal>

      <!-- delete-folders -->
      <base-modal
        v-if="showModal === 'delete-folders'"
        :disabled="loadingModal"
        :title="`Deletar a pasta ${activeFolder.title}`"
        size="small"
        :overlay="false"
        @close="closeModal"
      >
        <span
          class="text-medium text-gray visible-block top-padding-small horizontal-padding-medium"
        >
          Deseja excluir esta pasta e todos seus arquivos permanentemente?
        </span>
        <div class="flex flex-row flex-nowrap end-xs padding-medium">
          <base-button
            @click.native="closeModal"
            apperance="outline"
            size="small"
            :disabled="loadingModal"
            class="right-margin-small"
          >
            Não
          </base-button>
          <base-button
            @click.native="deleteFolders"
            size="small"
            :disabled="loadingModal"
            :loading="loadingModal"
          >
            Sim
          </base-button>
        </div>
      </base-modal>
    </template>

    <div class="flex flex-column flex-nowrap full-width full-height background-light">
      <div class="flex-auto">
        <the-header
          :title="activeFolder.title"
          :state="state"
          :dropdown="dropdown"
          :total-selected-files="totalSelectedFiles"
          :index-selected-files="indexSelectedFiles"
          :has-image-to-send="hasImagetoSend"
          :disabled-send-button="disabledSendButton"        
          :isPdfUploadPage="isPdfUploadPage"
          :hide-selection="hideSelection"
          :selected-icon="selectedIcon"
          @rename-folders="
            () => {
              showModal = 'rename-folders';
              folderName = activeFolder.title;
            }
          "
          @delete-folders="showModal = 'delete-folders'"
          @list-files="
            () => {
              state = 'initial';
              hasImagetoSend = false;
            }
          "
          @upload-files="state = 'upload'"
          @use-files="useFiles"
          @deselect-files="files.map((file) => (file.selected = false))"
          @use-icon="
            $emit('close', false);
            $emit('icon', selectedIcon);
          "
          @copy-files="copyFiles"
          @delete-files="showModal = 'delete-files'"
          @rename-files="
            () => {
              showModal = 'rename-files';
              fileName = getFileName();
            }
          "
          @move-files="showModal = 'move-files'"
          @send-files="sendFiles"
        />
      </div>

      <div
        v-if="state === 'initial' && files.length > 0"
        class="vertical-padding-small horizontal-padding-medium background-white bottom-border-gray"
      >
        <base-input
          type="text"
          :placeholder="`Procurar em ${activeFolder.name}`"
          v-model="search"
          size="small"
        />
      </div>

      <div v-show="error.type" class="full-width rel" style="z-index: 10">
        <div class="full-width abs">
          <base-alert
            :apperance="error.type"
            @close="error = {}"
            class="shadow-large margin-medium"
          >
            {{ error.message }}
          </base-alert>
        </div>
      </div>

      <template v-if="state === 'initial'">
        <div v-if="activeFolder.name !== 'icones'" class="padding-medium auto-overflow">
          <div class="row x-small-space-xs">
            <div
              v-for="(fileItem, fileIndex) in listFiles"
              :key="fileIndex"
              :class="['col-xs-4', { 'col-sm-3': aside }, { 'col-sm-2': !aside }]"
            >
              <base-file
                :thumbnail="fileItem.thumbnail"
                :filename="fileItem.filename"
                :selected="fileItem.selected"
                :extension="fileItem.ext"
                @click.native="fileItem.selected = !fileItem.selected"
                @dblclick.native="useFiles(fileIndex)"
                hover
              />
            </div>
          </div>
        </div>
        <div v-else class="padding-medium auto-overflow">
          <div class="row x-small-space-xs">
            <div
              v-for="(iconItem, iconIndex) in listIcons"
              :key="iconIndex"
              class="col-xs-2"
            >
              <i
                :class="[
                  iconItem,
                  'background-white rounded-x-small full-width vertical-padding-medium bigger-text-small text-center',
                  { 'text-primary border-primary': iconItem === selectedIcon },
                  { 'text-dark border-gray': iconItem !== selectedIcon },
                  { 'hover:border-primary': iconItem !== selectedIcon && !hideSelection },
                  { 'cursor-pointer': !hideSelection },
                ]"
                @click="
                  () => {
                    if (!hideSelection) {
                      selectedIcon = selectedIcon === iconItem ? '' : iconItem;
                    }
                  }
                "
                @dblclick="
                  () => {
                    if (!hideSelection) {
                      $emit('close', false);
                      $emit('icon', iconItem);
                    }
                  }
                "
              ></i>
            </div>
          </div>
        </div>
      </template>

      <the-upload
        v-if="state === 'upload'"
        :folder-files="listFiles"
        @disabled-send-button="(value) => (disabledSendButton = value)"
        @upload-files="(value) => (uploadFiles = value)"
        @has-image-to-send="(value) => (hasImagetoSend = value)"
      />

      <div v-if="state === 'loading'" class="flex-1 auto-overflow rel">
        <img src="../../../img/loading-black.svg" class="center-middle-absolute" />
      </div>
    </div>
  </base-modal>
</template>

<style src="../../identity.css"></style>
<style scoped src="./styles.css"></style>

<script src="./scripts.js"></script>
