<template>
  <div :class="{ 'subgroup-holder-outer': 1 }" v-if="fieldNode">
    <div class="subgroup-num">{{ index }}</div>
    <a
      ref="anchor"
      class="subgroup-anchor"
      :name="anchorName"
      :id="anchorName"
    ></a>
    <div v-on="listeners" :class="{ 'cursor-pointer': expandable }">
      <span class="text-subtitle_group"
        >{{ fieldNode.label }}
        <q-icon
          v-if="expandable"
          class="q-expansion-item__toggle-icon q-icon notranslate"
          :class="{ 'q-expansion-item__toggle-icon--rotated': expand }"
          name="keyboard_arrow_down"
        />
      </span>
    </div>
    <q-slide-transition>
      <div class="subgroup-holder" v-show="expand">
        <slot />
      </div>
    </q-slide-transition>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import {
  ObjectMetaModel,
  ObjectMetaModelValue,
} from '@devsun/form-generator/dist';
import { FormGeneratorGroup } from '@devsun/form-generator';
import get from 'lodash/get';

@Component({
  components: {},
})
export default class FormGroup extends Vue {
  @Prop({ required: true }) model: ObjectMetaModel;
  @Prop({ required: true }) fieldNode: FormGeneratorGroup;
  @Prop() value: ObjectMetaModelValue;
  @Prop({ default: false }) flat: boolean;

  // todo numeric index of a group
  @Prop() index: string;
  // todo hierarhy level
  @Prop({ default: 0 }) private level: number;

  get anchorName() {
    return `group__${this.fieldNode.fieldGroup.name}`;
  }

  get isTopLevel(): boolean {
    return this.level === 0;
  }

  private get expandable() {
    return get(this, 'fieldNode.fieldGroup.expandable', false);
  }
  private get expanded() {
    return get(this, 'fieldNode.fieldGroup.expanded', false);
  }

  private expand = !this.expandable || this.expanded;
  private toggleExpand() {
    this.expand = !this.expand;
  }

  get listeners() {
    if (this.expandable)
      return {
        click: this.toggleExpand,
      };
  }
}
</script>
<style scoped>
.text-subtitle_group {
  font-size: 1.1rem !important;
  font-weight: 400;
  line-height: 1.75rem;
  letter-spacing: 0.00937em;
}
</style>
