<template>
  <div class="add-content-container">
    <IconTextButton
      icon="more"
      :appearance="appearance"
      :type="type"
      @click="isOpened = !isOpened"
    >
      {{ $_tr('addContent.addElement') }}
    </IconTextButton>

    <transition name="fadeIn">
      <ul v-if="isOpened" class="menu">
        <li
          v-for="content in allowedContents"
          :key="content.id"
          @click="
            handleMultipleAdd({ multiUpload: false, contentType: content })
          "
        >
          <span>
            <IconText icon="file">
              {{ $_tr(`addContent.${content}`) }}
            </IconText>
          </span>
        </li>
        <template>
          <li
            v-for="item in multipleUploadAllowedContents"
            :key="item.id"
            @click="handleMultipleAdd({ multiUpload: true })"
          >
            <span>
              <IconText icon="files">
                {{ $_tr(`addContent.multipleDocumentTypes.${item}`) }}
              </IconText>
            </span>
          </li>
        </template>
      </ul>
    </transition>
  </div>
</template>

<script>
import { IconText } from 'inside-collection/atoms'
import { IconTextButton } from 'inside-collection/components'

import { storage } from '@inside-library/helpers/Storage'

export default {
  name: 'add-content',
  $_i18nRootPath: 'customs.COMMONS',
  components: { IconTextButton, IconText },
  props: {
    content: {
      type: String
    },
    parents: {
      type: Array
    },
    contents: {
      type: Array
    },
    multiUploadContents: {
      type: Array
    },
    appearance: {
      type: String
    },
    type: {
      type: String
    }
  },
  data() {
    const permissions = storage.get('current-user').permissions.add

    return {
      isOpened: false,
      allowedContents: this.contents.filter(contentType =>
        permissions.includes(contentType)
      ),
      multipleUploadAllowedContents: this.multiUploadContents.filter(
        contentType => permissions.includes(contentType)
      )
    }
  },
  methods: {
    handleMultipleAdd({ multiUpload, contentType }) {
      if (contentType) {
        this.$router.push({ name: 'Add', params: { content: contentType } })
      } else {
        this.triggerModal(
          'add-form',
          'static',
          {
            item: {
              customSections: [],
              customFields: [],
              parents: this.parents[0],
              contents: this.contents[0],
              multiUpload
            }
          },
          { layout: 'right', size: 'l', transition: 'fadeInLeft' }
        )

        this.isOpened = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.add-content {
  .add-content-container {
    text-align: center;
    top: 10px;
    z-index: 3;

    .ds-button-container.secondary {
      background: var(--color-light);
    }

    .menu {
      left: 50%;
      transform: translate(-50%);

      &::before,
      &::after {
        right: 140px;
      }
    }
  }
}

.add-content-container {
  position: relative;
  text-align: right;
  top: 125px;
  z-index: 3;

  @include mobile {
    text-align: center;
    top: -20px;
  }

  .menu {
    position: absolute;
    top: calc(100% + var(--spacing-m));
    right: 0;
    width: 280px;
    padding: var(--spacing-m);
    background: var(--color-light);
    border: 1px solid var(--color-grey-100);

    @include mobile {
      left: 0;
    }

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

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

    &::after {
      z-index: 1;
      bottom: calc(100% + 2px);
      border-width: 0 7.5px 15px 7.5px;
      border-color: transparent transparent var(--color-grey-100) transparent;
    }

    li {
      cursor: pointer;

      + li {
        margin-top: var(--spacing-s);
      }

      &:hover {
        a,
        span,
        ::v-deep .ds-icon-text-container {
          .ds-icon-container {
            fill: var(--color-admin-700);
          }

          .text {
            color: var(--color-admin-700);
          }
        }
      }
    }

    a,
    span,
    ::v-deep .ds-icon-text-container {
      .ds-icon-container {
        fill: var(--color-admin);

        @include transition(fill 0.4s);
      }

      .text {
        color: var(--color-admin);

        @include transition(color 0.4s);
      }
    }

    a,
    span {
      display: flex;
      align-items: center;
      font-size: var(--font-size-labor);
    }
  }
}
</style>
