<template>
  <widget-wrapper v-bind="$props" v-show="!isHidden">
    <div class="q-my-md">
      <base-label-value :padded-label="paddedGroups">
        <template v-slot:label>
          {{ fieldNode.label ? fieldNode.label : '' }}
        </template>
        <template v-slot:value>
          <arm-datepicker
            v-bind="props"
            :value="currentValue"
            :noLabels="true"
            :readonly="true"
          />
          <div class="printer-input-value">{{ currentValue }}</div>
        </template>
      </base-label-value>
    </div>
  </widget-wrapper>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { WidgetWrapper, ObjectMetaModelValue } from '@devsun/form-generator';
import ArmDatepicker from '../datepicker/arm-datepicker.vue';
import { FormGeneratorNode } from '@devsun/form-generator';

@Component({
  components: {
    ArmDatepicker,
    WidgetWrapper,
  },
})
export default class CardDate extends Vue {
  @Prop() fieldNode: FormGeneratorNode;
  @Prop() value: ObjectMetaModelValue;

  protected get props() {
    return this.fieldNode?.rawAttrs?.props || undefined;
  }

  @Prop({}) hideNulls!: boolean;

  @Prop({}) paddedGroups!: boolean;

  get currentValue(): string {
    return this.value && (this.value.__id as string);
  }

  get fieldClasses() {
    return {
      editable: !this.fieldNode.readonly,
      'label-uppercase': false,
      dense: this.isDense,
    };
  }

  get isHidden(): boolean {
    return this.hideNulls && !this.currentValue;
  }
}
</script>
