<template>
  <div
    class="q-mb-md"
    :class="{ 'subgroup-holder-outer': 1, collapsed: isCollapsed }"
    v-if="fieldNode"
    v-show="!isHidden"
  >
    <div>
      <a
        ref="anchor"
        class="subgroup-anchor"
        :name="anchorName"
        :id="anchorName"
      ></a>
      <span class="text-subtitle1">{{ fieldNode.label }}</span>
    </div>
    <div class="fg_table-group">
      <slot />
    </div>
  </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 { QMarkupTable } from 'quasar';
import { isChildrensModelNotEmpty } from './group-utils';

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

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

  @Prop({}) hideNulls!: boolean;

  private isCollapsed: boolean = true;

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

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

  toggle() {
    this.isCollapsed = !this.isCollapsed;
  }

  get isHidden(): boolean {
    return (
      this.hideNulls && !isChildrensModelNotEmpty(this.fieldNode, this.model)
    );
  }
}
</script>

<style>
.fg_table-group {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
}

.fg_table-group .form-generator-field {
  padding-left: 16px;
  padding-right: 16px;
}

.fg_table-group .form-generator-field:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
</style>
