<template>
  <r-multi-select
    :label="label"
    :placeholder="placeholder"
    :options="statusOptions"
    :status="selectedStatusesWidthLabel"
    @input="$emit('input', $event)"
  />
</template>

<script lang="ts">
import { Component, Prop, Vue, Model } from 'vue-property-decorator';
import RMultiSelect from '@/recruits/components/common/r-multi-select.vue';
import { DictionariesElement } from '@/recruits/openapi/ervu-service';

interface Option {
  label: string;
  value: string;
}

@Component({
  components: {
    RMultiSelect,
  },
})
export default class RStatusSelect extends Vue {
  @Prop({ default: () => [] }) statuses: string[];
  @Prop({ default: '' }) label: string;
  @Prop() placeholder?: string;
  @Model('input', { default: () => [] }) value: Array<Option>;
  @Prop({
    type: String,
    default: 'ervuDictionaries/recruitStatusDescription',
  })
  readonly dictionaryPath: string;

  // TODO - переезд всех словарей в будущем на формат dictionariesElement
  // временное решение как выбор типа
  @Prop({
    type: String,
    default: 'stringDictionary',
  })
  readonly dictionaryType: 'stringDictionary' | 'dictionariesElement';

  get selectedStatusesWidthLabel(): Array<Option> {
    return this.value.map(({ value }) => {
      return {
        label: this.statusDictionary[value],
        value,
      };
    });
  }

  public get statusOptions(): Option[] {
    return this.statuses.map((key) => ({
      label: this.statusDictionary[key],
      value: key,
    }));
  }

  get statusDictionary(): Record<string, string> {
    if (this.dictionaryType === 'stringDictionary') {
      return this.$store.getters[this.dictionaryPath];
    } else {
      const dictionaryObj: Record<string, string> = {};
      this.$store.getters[this.dictionaryPath].forEach(
        (dictionaryElem: DictionariesElement) => {
          dictionaryObj[dictionaryElem.code] = dictionaryElem.value;
        }
      );
      return dictionaryObj;
    }
  }
}
</script>
