<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"
          :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>