<template>
  <multi-language-only>
    <asset-detail-editor-property title="Alt tekst" id="alt" :active-id="activeId" :close="close" v-if="model">
      <field :label="language.name" v-for="language in languages" :key="language.key">
        <input type="text" class="form-control" v-model="model[language.key]">
      </field>
    </asset-detail-editor-property>
  </multi-language-only>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import { namespace } from 'vuex-class';

import Field from '../shared/form/field.vue';
import AssetDetailEditorProperty from './asset-detail-editor-property.vue';

// Multi-language
import MultiLanguageOnly from '../shared/language/multi-language-only.vue';
import { SupportedLanguage } from '../types/language';

const LanguageStore = namespace('languages');

@Component({
  components: {
    Field,
    AssetDetailEditorProperty,
    // Multi-language
    MultiLanguageOnly
  }
})
export default class AssetDetailAltsProperty extends Vue {
  @Prop({ type: Object }) readonly value!: { [languageKey: string]: string };
  @Prop({ type: String }) readonly activeId!: string;
  @Prop({ type: Function, required: true }) readonly close!: () => void;

  @LanguageStore.State('all') languages!: SupportedLanguage[];

  created() {
    this.model = {
      ...this.languages.reduce((acc, i) => ({ ...acc, [i.key]: '' }), {}),
      ...this.value
    };
  }

  get model() {
    return this.value;
  }

  set model(value: { [languageKey: string]: string }) {
    this.$emit('input', value);
  }
}
</script>
