<template>
  <div
    class="RSpoilerSection"
    :class="[expanded && 'expanded', bordered && 'bordered']"
  >
    <div class="RSpoilerSection_header" @click.stop="toggle">
      <h4>{{ title }}</h4>
      <div class="actions" @click.prevent.stop>
        <slot name="actions" @click.prevent.stop />
        <r-btn
          v-for="(action, i) in actions"
          :key="i"
          @click.prevent="action.cb"
          action.label
        >
          {{ action.label }}
        </r-btn>
      </div>
      <span class="counter" v-if="counter !== undefined">{{ counter }}</span>
      <div class="RSpoilerSection_trigger" />
    </div>
    <div class="RSpoilerSection_content">
      <slot />
    </div>
  </div>
</template>

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

type ActionButton = {
  cb: () => void;
  label: string;
  class?: string;
  icon?: string;
};

@Component({})
export default class RSpoilerSection extends Vue {
  @Prop()
  title: string;

  @Prop()
  actions: ActionButton[];

  @Prop()
  counter: number;

  @Prop({ default: true })
  value: boolean;

  @Prop({ default: false })
  bordered: boolean;

  public expanded = false;

  @Watch('value', { immediate: true })
  public onValueChange(): void {
    this.expanded = !!this.value;
  }

  toggle(): void {
    this.expanded = !this.expanded;
    console.log('toggle', this.expanded);
    this.$emit('toggle', this.expanded);
  }
}
</script>

<style lang="scss" scoped>
.RSpoilerSection {
  margin-bottom: 12px;

  &_header {
    display: flex;
    gap: 12px;
    align-items: center;
    cursor: pointer;

    h4 {
      font-family: 'Golos Text';
      flex-grow: 1;
      font-style: normal;
      font-weight: 500;
      font-size: 20px;
      line-height: 24px;
      letter-spacing: -0.015em;
      color: #015e98;
      margin-top: 0;
      margin-bottom: 0;
    }

    .counter {
      font-size: 10px;
      line-height: 12px;
      height: 16px;
      padding: 2px 4px;
      border-radius: 2px;
      background-color: #ddf0f9;
      color: #1d70a4;
      letter-spacing: 0.05em;
    }

    ::v-deep .q-btn {
      transform: scale(0.7) translateX(15%);
      margin-top: -4px;
      margin-bottom: -4px;
    }
  }

  &_trigger {
    width: 20px;
    height: 20;
    transition: all 0.25s ease;
    &:after {
      font-size: 18px;
      font-family: 'pgs';
      color: #015e98;
      content: '\e977';
    }
  }

  &_content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
  }

  &.bordered {
    padding: 8px;
    border: 1px solid rgba(1, 72, 116, 0.11);
    border-radius: 4px;
  }

  &.expanded {
    .RSpoilerSection_header h4 {
      color: rgba(2, 12, 18, 0.9);
    }
    .RSpoilerSection_content {
      max-height: 200vh;
    }
    .RSpoilerSection_trigger {
      color: black;
      transform: scaleY(-1);
    }
    .counter {
      color: #767a7f;
      background-color: #dddde1;
    }
  }
}
</style>
