<template>
  <widget-wrapper v-bind="$props" v-show="!isHidden">
    <base-label-value :padded-label="paddedGroups" class="q-my-md">
      <template v-slot:label>
        {{ fieldNode.label ? fieldNode.label : '' }}
      </template>
      <template v-slot:value>
        <span v-for="(val, i) in currentValues">
          {{ val }}
          <span v-if="i < currentValues.length - 1">{{ ' ' + divider }}</span>
        </span>
      </template>
    </base-label-value>
  </widget-wrapper>
</template>

<script lang="ts">
/*
attr
"props": {
        "divider": ","
      },
      "reference": {
        "mode": "grid",
        "attrName": "NaimOKVED"
      }

model
"SvOKVEDDop": {
    "smevOKVED": [
      {
        "condition": "dop",
        "KodOKVED": "52.61",
        "GRNIPDataDataZapisi": "2005-04-19",
        "NaimOKVED": "РОЗНИЧНАЯ ТОРГОВЛЯ ПО ЗАКАЗАМ",
        "GRNIPDataGRNIP": 305500910900012
      },
      {
        "condition": "dop",
        "KodOKVED": "52.63",
        "GRNIPDataDataZapisi": "2005-04-19",
        "NaimOKVED": "ПРОЧАЯ РОЗНИЧНАЯ ТОРГОВЛЯ ВНЕ МАГАЗИНОВ",
        "GRNIPDataGRNIP": 305500910900012
      }
    ]
  },
* */
import { Component, Prop, Vue } from 'vue-property-decorator';
import { WidgetWrapper, createIMaskTokens } from '@devsun/form-generator';
import { Field, Value } from '@devsun/eva-models';
import get from 'lodash/get';
import { FormGeneratorNode } from '@devsun/form-generator';

@Component({
  components: {
    WidgetWrapper,
  },
})
export default class CardConcatenatedString extends Vue {
  @Prop({ required: true }) value: Value.Wrapper;
  @Prop() fieldNode: FormGeneratorNode;

  @Prop({}) hideNulls!: boolean;
  @Prop({}) paddedGroups!: boolean;

  @Prop({ default: '' }) private divider: string;

  private fieldMask = null;

  get inputType(): string {
    switch (this.fieldNode.rawAttrs.view) {
      case Field.View.textarea:
        return 'textarea';
      default:
        return 'text';
    }
  }

  get currentValues(): string[] {
    const value = this.value ? this.value.__id : [''];
    const attrName = get(this, 'fieldNode.reference.attrName', 'default');
    if (attrName && Array.isArray(value)) {
      return value.reduce((acc, item) => {
        if (item[attrName]) {
          acc.push(item[attrName]);
        }
        return acc;
      }, []);
    }
    return [];
  }

  get maskedValue() {
    if (this.fieldMask) {
      return this.fieldMask.resolve(this.value);
    }
    return this.value;
  }

  get maskConfig() {
    if (this.fieldNode.masks && this.fieldNode.masks.length > 0) {
      // get the last (top) one
      // IMask has one missing feature - ability to set placeholder char for every char in definition
      return {
        definitions: createIMaskTokens(),
        mask: this.fieldNode.masks[this.fieldNode.masks.length - 1].value,
        lazy: false,
      };
    } else {
      return null;
    }
  }

  emitInput(cb, value) {
    if (this.fieldMask) {
      this.fieldMask.resolve(value);
      cb(this.fieldMask.unmaskedValue);
    } else {
      cb(value);
    }
  }

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