<template>
  <div class="content-block-element-chooser-widget__wrapper">
    <button class="content-block-element-chooser-widget__remove-button icon-button" @click="remove">
      <cross-icon class="icon-button__icon" />
    </button>
    <h3 class="content-block-element-chooser-widget__heading" data-cy="chooser-heading">Neuer Inhalt</h3>
    <template v-if="includeListOption && hasDefaultFeatures">
      <checkbox
        class="content-block-element-chooser-widget__list-toggle"
        :checked="convertToList"
        data-cy="convert-to-list-checkbox"
        label="Aufzählungszeichen hinzufügen"
        @input="convertToList = $event"
      />
    </template>

    <div
      :class="{ 'content-block-element-chooser-widget--no-assignment': hideAssignment }"
      class="content-block-element-chooser-widget"
    >
      <chooser-element
        :title="type.title"
        :type="type.type"
        :icon="type.icon"
        v-for="(type, idx) in filteredChooserTypes"
        :key="idx"
        @select="changeType(type.block)"
      />
    </div>
  </div>
</template>

<script>
import Checkbox from '@/components/ui/Checkbox';

import formElementIcons from '@/components/ui/form-element-icons';
import CrossIcon from '@/components/icons/CrossIcon';
import ChooserElement from '@/components/content-forms/ChooserElement';
import { DEFAULT_FEATURE_SET } from '@/consts/features.consts';

export default {
  props: {
    element: {},
    index: {},
    hideAssignment: {
      type: Boolean,
      default: false,
    },
    includeListOption: {
      type: Boolean,
      default: false,
    },
  },

  inject: ['features'],

  components: {
    ChooserElement,
    CrossIcon,
    Checkbox,
    ...formElementIcons,
  },

  data() {
    const hasDefaultFeatures = this.features === DEFAULT_FEATURE_SET;
    return {
      convertToList: false,
      chooserTypes: [
        {
          type: 'subtitle',
          block: 'subtitle',
          title: 'Untertitel',
          icon: 'title-icon',
        },
        {
          type: 'link',
          block: 'link_block',
          title: 'Link',
          icon: 'link-icon',
        },
        {
          type: 'video',
          block: 'video_block',
        },
        {
          type: 'image',
          block: 'image_url_block',
          title: 'Bild',
        },
        {
          type: 'text',
          block: 'text_block',
        },
        {
          type: 'assignment',
          block: 'assignment',
          icon: 'speech-bubble-icon',
          title: 'Aufgabe & Ergebnis',
          show: !this.hideAssignment && hasDefaultFeatures,
        },
        {
          type: 'document',
          block: 'document_block',
          title: 'Dokument',
          show: hasDefaultFeatures,
        },
      ],
    };
  },

  computed: {
    filteredChooserTypes() {
      return this.chooserTypes.filter((type) => !('show' in type) || type.show); // display element if `show` is not set or if `show` evaluates to true
    },
    hasDefaultFeatures() {
      return this.features === DEFAULT_FEATURE_SET;
    },
  },

  methods: {
    changeType(type) {
      this.$emit('change-type', {
        type,
        convertToList: this.convertToList,
      });
    },
    remove() {
      this.$emit('remove');
    },
  },
};
</script>

<style scoped lang="scss">
@import '~styles/helpers';

.content-block-element-chooser-widget {
  display: -ms-grid;

  @supports (display: grid) {
    display: grid;
  }
  grid-template-columns: repeat(7, 1fr);
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 0;
  font-family: $sans-serif-font-family;
  text-align: center;
  position: relative;

  // grid position in wrapper element
  grid-column: 1 / -1;

  /*IE10+*/
  & > :nth-child(1) {
    -ms-grid-column: 1;
  }

  & > :nth-child(2) {
    -ms-grid-column: 2;
  }

  & > :nth-child(3) {
    -ms-grid-column: 3;
  }

  & > :nth-child(4) {
    -ms-grid-column: 4;
  }

  & > :nth-child(5) {
    -ms-grid-column: 5;
  }

  & > :nth-child(6) {
    -ms-grid-column: 6;
  }

  &--no-assignment {
    grid-template-columns: repeat(5, 1fr);
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
  }

  &__wrapper {
    display: grid;
    grid-template-columns: 180px 1fr 50px;
    align-items: center;
    row-gap: $small-spacing;
  }

  &__remove-button {
    grid-column: 3;
  }

  &__heading {
    @include heading-3;
    margin-bottom: 0;
    grid-column: 1;
    grid-row: 1;
  }

  &__list-toggle {
    margin-bottom: 0;
    grid-column: 2;
    grid-row: 1;
  }
}
</style>
