<template>
  <section>
    <h3 id="PatternSelector-config">{{l.appearance}}</h3>
    <Preview :config="previewConfig" />
    <div class="config-spacer" />
    <TextConfig v-model="textConfig" />
  </section>
</template>

<script>
import {getConfig, defaultConfig, lskey, getPreviewText} from './codegen.js';
import labels from './labels.json';
import TextConfig from '../TextConfig.vue';
import { makeUpdateConfig } from '../utils.js';

const updateConfig = makeUpdateConfig(lskey, defaultConfig, getPreviewText);
export default {
  components: {
    TextConfig,
  },
  props: {
    version: {type: String},
    previewConfig: {type: Object},
  },
  data() {
    const config = getConfig();
    return {...config};
  },
  methods: {
    updateConfig,
  },
  computed: {
    l() {
      return labels[this.$lang] ?? labels['en-US'];
    },
    textConfig: {
      get() {
        return this;
      },
      set(value) {
        Object.assign(this, value);
        this.updateConfig();
      },
    },
  },
};
</script>

<style scoped>
div.config-spacer {
  height: 1em;
}
input {
  width: 6em;
}
</style>