<template>
  <a
    :class="typeClass"
    class="filter-entry"
    data-cy="filter-entry"
    :style="categoryStyle"
    @click="$emit('filter')"
  >
    <span class="filter-entry__text">{{ text }}</span>
    <span
      :style="activeStyle"
      class="filter-entry__icon-wrapper"
    >
      <chevron-right
        :style="{ fill: category.foreground }"
        class="filter-entry__icon"
      />
    </span>
  </a>
</template>

<script>
import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
import { defineAsyncComponent } from 'vue';
const ChevronRight = defineAsyncComponent(() =>
  import('@/components/icons/ChevronRight.vue')
);

export default {
  props: {
    text: {
      type: String,
      required: true,
    },
    id: {
      type: String,
      default: '',
    },
    isCategory: {
      type: Boolean,
      default: false,
    },
    category: {
      type: Object,
      default: () => ({}),
    },
  },

  components: {
    ChevronRight,
  },

  emits: ['filter'],

  apollo: {
    instrumentFilter: {
      query: INSTRUMENT_FILTER_QUERY,
    },
  },

  data() {
    return {
      instrumentFilter: {
        currentFilter: '',
      },
    };
  },

  computed: {
    isActive() {
      if (!this.instrumentFilter.currentFilter) {
        return this.id === '';
      }
      // eslint-disable-next-line
      const [_, identifier] = this.instrumentFilter.currentFilter.split(':');
      return this.id === identifier;
    },
    // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
    activeStyle() {
      if (this.isActive) {
        return {
          backgroundColor: this.category.background,
        };
      }
      return {};
    },
    // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
    categoryStyle() {
      if (this.isCategory) {
        return {
          color: this.category.foreground,
        };
      }
      return {};
    },
    // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
    typeClass() {
      return {
        'filter-entry--active': this.isActive,
        'filter-entry--category': this.isCategory,
      };
    },
  },
};
</script>

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

.filter-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;

  &__text {
    @include sub-heading;
    line-height: 1.5;
    color: inherit;
  }

  &__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    width: 20px;
    border-radius: 10px;
  }

  &__icon {
    width: 10px;
    height: 10px;
  }

  $root: &;

  @mixin filter-block($color) {
    &#{$root}--category {
      color: $color;
    }

    &#{$root}--active {
      #{$root}__icon-wrapper {
        background-color: $color;
      }
    }

    #{$root}__icon {
      fill: $color;
    }
  }

  &--language-communication {
    @include filter-block($color-accent-1-dark);
  }

  &--society {
    @include filter-block($color-accent-2-dark);
  }

  &--interdisciplinary {
    @include filter-block($color-accent-4-dark);
  }

  &--active {
    #{$root}__text {
      font-weight: 600;
    }

    #{$root}__icon-wrapper {
      background-color: black;
    }

    #{$root}__icon {
      fill: white;
    }
  }
}
</style>
