<template>
  <div
    :style="{
      color: instrument.type.category.foreground,
      backgroundColor: instrument.type.category.background,
    }"
    class="instrument-entry"
  >
    <!-- eslint-disable vue/no-v-html -->
    <h4
      class="instrument-entry__category"
      :style="{ color: instrument.type.category.foreground }"
      data-cy="instrument-subheader"
      v-html="categoryName"
    />
    <h3 class="instrument-entry__title">
      {{ instrument.title }}
    </h3>
  </div>
</template>

<script>
import { INTERDISCIPLINARY, LANGUAGE_COMMUNICATION, SOCIETY } from '@/consts/instrument.consts';
import { instrumentCategory } from '@/helpers/instrumentType';

// 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
export default {
  props: {
    instrument: {
      type: Object,
      required: true,
      default: undefined,
    },
  },

  computed: {
    typeClass() {
      return {
        'instrument-entry__language-communication': this.instrument.type.category === LANGUAGE_COMMUNICATION,
        'instrument-entry__society': this.instrument.type.category === SOCIETY,
        'instrument-entry__interdisciplinary': this.instrument.type.category === INTERDISCIPLINARY,
      };
    },
    categoryName() {
      return instrumentCategory(this.instrument);
    },
  },
};
</script>

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

.instrument-entry {
  padding: $medium-spacing;
  margin-bottom: $medium-spacing;
  border-radius: 8px;

  &__title {
    @include heading-3;
    margin-bottom: 0;
    overflow-wrap: break-word;
  }

  &__category {
    @include sub-heading;
    margin-bottom: $small-spacing;
  }

  $root: &;

  &__language-communication {
    background-color: $color-accent-1-light;

    #{$root}__category {
      color: $color-accent-1-dark;
    }
  }

  &__society {
    background-color: $color-accent-2-light;

    #{$root}__category {
      color: $color-accent-2-dark;
    }
  }

  &__interdisciplinary {
    background-color: $color-accent-4-light;

    #{$root}__category {
      color: $color-accent-4-dark;
    }
  }
}
</style>
