<template>
  <div class="content-block-chooser-widget" v-on:click="$emit('change-type', index)">
    <div class="content-block-chooser-widget__link">
      <link-icon class="content-block-chooser-widget__link-icon"></link-icon>
      <div class="content-block-chooser-widget__link-title">Link</div>
    </div>
    <div class="content-block-chooser-widget__link">
      <video-icon class="content-block-chooser-widget__link-icon"></video-icon>
      <div class="content-block-chooser-widget__link-title">Video</div>
    </div>
    <div class="content-block-chooser-widget__link">
      <image-icon class="content-block-chooser-widget__link-icon"></image-icon>
      <div class="content-block-chooser-widget__link-title">Bild</div>
    </div>
    <div class="content-block-chooser-widget__link">
      <text-icon class="content-block-chooser-widget__link-icon"></text-icon>
      <div class="content-block-chooser-widget__link-title">Text</div>
    </div>
    <div class="content-block-chooser-widget__link">
      <speech-bubble-icon class="content-block-chooser-widget__link-icon"></speech-bubble-icon>
      <div class="content-block-chooser-widget__link-title">Aufgabe&nbsp;& Ergebnis</div>
    </div>
    <div class="content-block-chooser-widget__link">
      <document-icon class="content-block-chooser-widget__link-icon"></document-icon>
      <div class="content-block-chooser-widget__link-title">Dokument</div>
    </div>
  </div>
</template>

<script>
  import LinkIcon from '@/components/icons/LinkIcon';
  import VideoIcon from '@/components/icons/VideoIcon';
  import ImageIcon from '@/components/icons/ImageIcon';
  import TextIcon from '@/components/icons/TextIcon';
  import SpeechBubbleIcon from '@/components/icons/SpeechBubbleIcon';
  import DocumentIcon from '@/components/icons/DocumentIcon';

  export default {
    props: ['element', 'index'],

    components: {
      LinkIcon,
      VideoIcon,
      ImageIcon,
      TextIcon,
      SpeechBubbleIcon,
      DocumentIcon
    },

    methods: {
      changeType() {
        console.log('changeType');
        this.element.type = 'link';
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";
  @import "@/styles/_functions.scss";

  .content-block-chooser-widget {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-column-gap: 0px;
    font-family: $sans-serif-font-family;
    text-align: center;
    border: 2px solid $color-grey;
    padding: 30px 5px;
    border-radius: 12px;
    margin-top: 20px;
    position: relative;
    margin-bottom: 20px;

    &::before {
      content: "";
      position: absolute;
      width: 20px;
      height: 20px;
      border: 2px solid $color-grey;
      border-bottom: 0;
      border-right: 0;
      background-color: white;
      top: -12px;
      left: 50%;
      transform: translateX(-50%) rotate(45deg);
    }

    &__link {
      padding: 0 20px;
      cursor: pointer;
    }

    &__link-icon {
      width: 40px;
      height: auto;
      margin-bottom: 15px;
    }

    &__link-text {
      font-size: toRem(13px);
    }

  }
</style>
