<template>
  <div>
    <a
      v-if="isAlive(heritedData, ['file', 'path'])"
      :class="heritedData.description === 'has_img' ? 'has_img' : ''"
      class="paragraph-space-links"
      @click="handleClick(heritedData.file.path)"
    >
      <Title tag="h5">{{ heritedData.title }}</Title>

      <BaseText
        v-if="heritedData.description && heritedData.description !== 'has_img'"
      >
        {{ heritedData.description }}
      </BaseText>

      <template v-if="heritedData.description === 'has_img'">
        <Avatar :image="null" size="xs" />
      </template>
    </a>

    <a
      v-else
      :href="heritedData.space_link"
      :target="isExternalLink(heritedData.space_link) ? '_blank' : '_self'"
      :class="heritedData.description === 'has_img' ? 'has_img' : ''"
      class="paragraph-space-links"
    >
      <Title tag="h5">{{ heritedData.title }}</Title>

      <BaseText
        v-if="heritedData.description && heritedData.description !== 'has_img'"
      >
        {{ heritedData.description }}
      </BaseText>

      <template v-if="heritedData.description === 'has_img'">
        <Avatar :image="null" size="xs" />
      </template>
    </a>
  </div>
</template>

<script>
import { Title, BaseText, Avatar } from 'inside-collection/atoms'

import { isExternal } from 'inside-collection/helpers'

export default {
  name: 'SpaceLinksParagraph',
  components: {
    Title,
    BaseText,
    Avatar
  },
  methods: {
    isExternalLink(link) {
      return isExternal(link)
    },
    handleClick(file) {
      this.$_downloadFile(file)
    }
  }
}
</script>

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

.paragraph-space-links {
  cursor: pointer;
  position: relative;
  display: block;
  width: 100%;
  padding: var(--spacing-l) var(--spacing-xl);
  margin: var(--spacing-s) auto;
  border: var(--border-default);

  &.has_img {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  &::before {
    position: absolute;
    top: 0;
    left: calc(var(--spacing-s) * (-1));
    width: var(--spacing-s);
    height: 100%;
    margin-left: var(--spacing-s);
    background: var(--color-secondary);
    content: '';

    @include transition(0.3s);
  }

  &:hover::before {
    background: var(--color-primary);
  }
}
</style>
