<template>
  <div
    class="copy-link"
    :class="{ 'copy-link--active': show }"
    @click="copyLink"
  >
    <Transition name="fade"> <span v-if="show">Link kopiert </span> </Transition>
    <link-icon class="copy-link__icon" />
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, computed, ref } from 'vue';
import log from 'loglevel';

const LinkIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/LinkIcon.vue'));

const props = defineProps<{
  id: string;
}>();

const directLink = computed(() => {
  const { host, protocol } = window.location;
  return `${protocol}//${host}/content/${props.id}`;
});
const show = ref(false);

const copyLink = () => {
  show.value = true;
  navigator.clipboard.writeText(directLink.value).then(() => {
    log.debug('copied link', directLink.value);
  });
  setTimeout(() => {
    show.value = false;
  }, 3000);
};
</script>

<style lang="scss">
@import 'styles/helpers';
.copy-link {
  display: inline-flex;
  align-items: center;
  gap: $small-spacing;
  padding: 0 $small-spacing;
  border-radius: 5px;
  cursor: pointer;
  @include regular-text;
  transition: background-color 0.25s ease;

  &--active {
    background-color: $color-brand-light;
  }

  &__icon {
    width: 30px;
    height: 30px;
    fill: $color-silver-dark;

    &:hover {
      fill: $color-charcoal-dark;
    }
  }

  &--active &__icon {
    fill: $color-charcoal-dark;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.25s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
