<template>
  <div class="flex flex-row flex-nowrap middle-xs padding-small background-white bottom-border-gray">

    <div v-show="state === 'upload'" class="flex-0">
      <base-button
        @click.native="$emit('list-files')"
        size="small"
        square
        apperance="white"
      >
        <template #icon>
          <i class="fas fa-chevron-left"></i>
        </template>
      </base-button>
    </div>

    <div class="flex-1 text-ellipsis padding-small">
      <span class="text-dark text-medium text-ellipsis">{{title}}</span>
    </div>

    <div v-show="state !== 'loading'" class="flex-0 horizontal-padding-small">
      <base-button
        v-show="state !== 'upload' && totalSelectedFiles === 0 && title !== 'Icones'"
        size="small"
        @click.native="$emit('upload-files')"
      >
        Enviar arquivos
      </base-button>

      <base-button
        v-show="state !== 'upload' && totalSelectedFiles === 1 && !hideSelection"
        size="small"
        @click.native="$emit('use-files', indexSelectedFiles)"
      >
        Usar
      </base-button>

      <base-button
        v-show="!hideSelection && selectedIcon && title === 'Icones'"
        size="small"
        @click.native="$emit('use-icon')"
      >
        Usar
      </base-button>

      <base-button
        v-show="state !== 'upload' && totalSelectedFiles > 1 && !hideSelection"
        size="small"
        apperance="white"
        @click.native="$emit('deselect-files')"
      >
        Desmarcar
      </base-button>

      <base-button
        v-show="state === 'upload' && hasImageToSend"
        size="small"
        @click.native="$emit('send-files')"
        :disabled="disabledSendButton"
      >
        Enviar
      </base-button>
    </div>

    <div
      v-show="dropdown.length && state !== 'loading' && !hasImageToSend"
      class="flex-0 right-padding-small">
      <base-dropdown
        @rename-folders="$emit('rename-folders')"
        @delete-folders="$emit('delete-folders')"
        @copy-files="$emit('copy-files')"
        @delete-files="$emit('delete-files')"
        @rename-files="$emit('rename-files')"
        @move-files="$emit('move-files')"
        :items="dropdown"
      />
    </div>

  </div>
</template>

<script>
import BaseButton from '@elements/BaseButton/index.vue';
import BaseDropdown from '@elements/BaseDropdown/index.vue';

export default {
  name: 'TheHeader',
  components: {
    BaseButton,
    BaseDropdown
  },
  props: {
    title: String,
    state: {
      type: String,
      default: 'initial',
      validator: function (value) {
        return ['initial', 'upload', 'loading'].indexOf(value) !== -1
      }
    },
    dropdown: {
      type: Array,
      default: []
    },
    indexSelectedFiles: Number,
    totalSelectedFiles: {
      type: Number,
      default: 0
    },
    hasImageToSend: Boolean,
    disabledSendButton: Boolean,
    hideSelection: Boolean,
    selectedIcon: String,
  },
}
</script>