<i18n>
{
  "ru": {
    "expand": "Развернуть",
    "rollUp": "Свернуть"
  },
  "en": {
    "expand": "Expand",
    "rollUp": "Roll up"
  }
}
</i18n>

<template>
  <div class="q-pb-md">
    <div>
      <q-btn
        color="primary"
        text-color="white"
        @click="() => (isSpoilerOpen = !isSpoilerOpen)"
        :icon="isSpoilerOpen ? 'expand_less' : 'expand_more'"
        :label="label"
      />
    </div>
    <transition appear name="fade">
      <div v-show="isSpoilerOpen">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component
export default class Spoiler extends Vue {
  @Prop() expandTitle: string;

  get label() {
    return this.isSpoilerOpen
      ? this.$t('rollUp')
      : (this.expandTitle || this.$t('expand'));
  }

  isSpoilerOpen: boolean = false;
}
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease-in;
}
.fade-enter-to,
.fade-leave {
  opacity: 1;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>