<template>
  <div class="multi-upload-button-container">
    <div
      v-click-outside="
        () => {
          showMenu = false
        }
      "
      class="container"
    >
      <IconTextButton type="admin" icon="more" @click="showMenu = !showMenu">
        {{ $_tr('btnLabel') }}
      </IconTextButton>

      <transition name="fadeIn">
        <Card v-if="showMenu" class="menu-contents">
          <component-listing
            id="content-ged"
            :static-data="items"
            direction="vertical"
            fractions="1"
          >
            <template #default="{ item }">
              <div class="add-item" @click="handleClick(item)">
                <IconText :icon="item.icon || 'file'">
                  {{ $_tr(item.label) }}
                </IconText>
              </div>
            </template>
          </component-listing>
        </Card>
      </transition>
    </div>
  </div>
</template>

<script>
import vClickOutside from 'click-outside-vue3'

import { IconText } from 'inside-collection/atoms'
import { IconTextButton, Card } from 'inside-collection/components'

export default {
  name: 'MultiUploadButton',
  $_i18nRootPath: 'customs.MULTI_UPLOAD_BUTTON',
  directives: {
    clickOutside: vClickOutside.directive
  },
  components: {
    Card,
    IconText,
    IconTextButton
  },
  props: {
    currentFolder: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      showMenu: false,
      items: [
        {
          content: 'photo',
          label: 'menu.photo',
          icon: 'photo-file',
          callback: () => {
            this.$router.push('/add/photo')
          }
        },
        {
          content: 'photo',
          label: 'menu.photos',
          icon: 'add-files',
          callback: () => {
            this.triggerModal(
              'multi-upload',
              'static',
              {
                item: {
                  parentFolder: this.currentFolder
                }
              },
              { layout: 'right', width: '1000px', transition: 'fadeInLeft' }
            )
          }
        },
        {
          content: 'folders',
          label: 'menu.folders',
          icon: 'folder',
          callback: () => {
            this.$router.push('/add/folders')
          }
        }
      ]
    }
  },
  computed: {
    contentWithPermissions() {
      return this.items.filter(item =>
        this.getCheckedData(this.getUserInfos, 'permission.add', []).includes(
          item.content
        )
      )
    }
  },
  methods: {
    handleClick(item) {
      this.showMenu = false

      item.callback()
    }
  }
}
</script>

<style lang="scss" scoped>
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.multi-upload-button-container {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--spacing-m);

  .menu-contents {
    position: absolute;
    top: calc(100% + 11px);
    right: 0;

    &::before,
    &::after {
      position: absolute;
      top: -10px;
      right: 32px;
      width: 0;
      height: 0;
      border-style: solid;
      content: '';
    }

    &::before {
      z-index: 2;
      border-width: 0 7.5px 10px;
      border-color: transparent transparent var(--color-light) transparent;
    }

    &::after {
      z-index: 1;
      top: -11px;
      border-width: 0 7.5px 10px;
      border-color: transparent transparent var(--color-grey-100) transparent;
    }
  }

  .add-item {
    color: var(--color-text);
    cursor: pointer;

    @include transition(color 0.4s);

    :deep(.ds-icon-container) {
      @include transition(fill 0.4s);
    }

    &:hover {
      color: var(--color-admin);

      :deep(.ds-icon-container) {
        fill: var(--color-admin);
      }
    }
  }
}
</style>
