<template>
  <div>
    <TextConfig v-model="textConfig" />
    <div>
      <div>{{l.format}}</div>
      <textarea v-model="fmt" :rows="rows" :cols="cols" />
    </div>
  </div>
</template>

<script>
import labels from './labels.json';
import TextConfig from '../TextConfig.vue';
import {format2previewText} from './codegen.js';

export default {
  components: {
    TextConfig,
  },
  props: {
    value: {type: Object},
    version: {type: String},
    rows: {type: Number, default: 7},
    cols: {type: Number, default: 40},
  },
  data() {
    const {fmt, text, ...textConfig} = this.value;
    return {
      textConfig,
      fmt,
    };
  },
  computed: {
    l() {
      return labels[this.$lang] ?? labels['en-US'];
    },
    preview() {
      return format2previewText(this.fmt, this.version);
    },
  },
  methods: {
    update() {
      this.$emit('input', {fmt: this.fmt, text: this.preview, ...this.textConfig});
    },
  },
  watch: {
    textConfig() {this.update()},
    fmt() {this.update()},
  },
}
</script>