<template>
  <div :class="makeClass(position, isSmall, isTransparent)">
    <NewTabOpenIcon v-if="openingMethod === 'newtab'" />
    <SameTabOpenIcon v-else-if="openingMethod === 'sametab'" />
    <IframeOpenIcon v-else-if="openingMethod === 'modal'" />
    <WorkspaceOpenIcon v-else-if="openingMethod === 'workspace'" />
  </div>
</template>

<script>
/* This component displays a small icon, indicating opening method */

// Import Icons
import NewTabOpenIcon from '@/assets/interface-icons/open-new-tab.svg';
import SameTabOpenIcon from '@/assets/interface-icons/open-current-tab.svg';
import IframeOpenIcon from '@/assets/interface-icons/open-iframe.svg';
import WorkspaceOpenIcon from '@/assets/interface-icons/open-workspace.svg';

export default {
  name: 'ItemOpenMethodIcon',
  props: {
    openingMethod: String, // newtab | sametab | modal | workspace
    isSmall: Boolean, // If true, will apply small class
    position: String, // Position classes: top, bottom, left, right
    isTransparent: Boolean, // If true, will apply opacity
  },
  methods: {
    /* Returns custom class string, from optional props */
    makeClass(position = 'top right', isSmall = false, transparent = false) {
      return `opening-method-icon
      ${position || 'top right'}
      ${isSmall ? 'short' : ''}
      ${transparent ? 'transparent' : ''}`;
    },
  },
  components: {
    NewTabOpenIcon,
    SameTabOpenIcon,
    IframeOpenIcon,
    WorkspaceOpenIcon,
  },
};
</script>

<style scoped lang="scss">
.opening-method-icon {
  svg {
    position: absolute;
    width: 1rem;
    margin: 2px;
    path {
      // fill: var(--primary);
      fill: currentColor;
    }
  }
  &.top svg { top: 0; }
  &.bottom svg { bottom: 0; }
  &.left svg { left: 0; }
  &.right svg { right: 0; }

  &.short svg {
    width: 0.8rem;
    margin: 0;
  }

  &.transparent svg {
    opacity: 0.5;
  }
}

</style>
