<template>
  <!-- eslint-disable vue/no-v-html -->
  <div
    class="solution"
    data-cy="solution"
  >
    <a
      class="solution__toggle"
      data-cy="show-solution"
      @click="toggle"
      >Lösung
      <template v-if="!visible">anzeigen</template>
      <template v-else>ausblenden</template>
    </a>
    <transition name="fade">
      <div
        class="solution__hidden fade"
        v-if="visible"
      >
        <p
          class="solution__text solution-text"
          data-cy="solution-text"
          v-html="sanitizedText"
        />
        <cms-document-block
          :solution="true"
          class="solution__document"
          :value="value.document"
          v-if="value.document"
        />
      </div>
    </transition>
  </div>
</template>

<script>
import { sanitizeAsHtml } from '@/helpers/text';
import CmsDocumentBlock from '@/components/content-blocks/CmsDocumentBlock.vue';

export default {
  props: ['value'],
  components: { CmsDocumentBlock },

  data() {
    return {
      visible: false,
    };
  },

  computed: {
    sanitizedText() {
      return sanitizeAsHtml(this.value.text);
    },
  },

  methods: {
    toggle() {
      this.visible = !this.visible;
    },
  },
};
</script>

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

.solution {
  display: grid;
  grid-auto-rows: auto;
  grid-row-gap: 15px;

  margin-bottom: 1rem;

  &__toggle {
    font-family: $sans-serif-font-family;
    color: $color-silver-dark;
    font-size: toRem(15px);
    /*margin-bottom: 15px;*/
    display: block;
    cursor: pointer;
    font-weight: $font-weight-regular;
  }

  &__text {
    font-size: toRem(18px);
    color: $color-silver-dark;

    :deep(p) {
      font-size: toRem(18px);
      color: $color-silver-dark;
    }

    :deep(ul) {
      padding-left: $medium-spacing;

      > li {
        list-style: disc outside none;
        color: $color-silver-dark;
      }
    }
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-active {
  opacity: 0;
}
</style>
