<template>
  <div class="instrument-filter">
    <checkbox
      :checked="type.enabled"
      :class="`instrument-filter__checkbox--${type.cls}`"
      :label="type.label"
      :key="i"
      class="instrument-filter__checkbox"
      v-for="(type, i) in types"
      @input="change($event, i)"
    />
  </div>
</template>

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

  export default {

    components: {
      Checkbox
    },
    data() {
      return {
        filter: [],
        types: [
          {
            label: 'Sprache und Kommunikation',
            enabled: true,
            prop: 'LANGUAGE_COMMUNICATION',
            cls: 'language'
          },
          {
            label: 'Gesellschaft',
            enabled: true,
            prop: 'SOCIETY',
            cls: 'society'
          },
          {
            label: 'Überfachliches Instrument',
            enabled: true,
            prop: 'INTERDISCIPLINARY',
            cls: 'interdisciplinary'
          },
        ]
      };
    },

    methods: {
      change(enabled, index) {
        let type = this.types[index];
        this.types = [
          ...this.types.slice(0, index),
          {
            ...type,
            enabled
          },
          ...this.types.slice(index + 1),
        ];
        this.$emit('filter',
          this.types
            .filter(t => t.enabled)
            .map(t => t.prop)
        );
      }
    },
  };
</script>

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

  .instrument-filter {
    display: flex;
    align-content: center;

    &__checkbox {
      &--language {
        /deep/ input:checked + .checkbox {
          background-color: $color-accent-1-dark;
        }
      }

      &--society {
        /deep/ input:checked + .checkbox {
          background-color: $color-accent-2-dark;
        }
      }

      &--interdisciplinary {
        /deep/ input:checked + .checkbox {
          background-color: $color-accent-4-dark;
        }
      }
    }
  }
</style>
