import { PrismEditor } from 'vue-prism-editor';
import { highlight, languages } from 'prismjs/components/prism-core';
import 'prismjs/components/prism-clike';
import 'prismjs/components/prism-markup-templating';
import 'prismjs/components/prism-php';
import 'prismjs/components/prism-javascript';

export default {
  name: 'HighlightEditor',
  props: {
    language: {
      type: String,
    },
    value: {
      type: String,
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    label: {
      type: String,
    },
    description: {
      type: String,
    },
    error: {
      type: String,
    },
    required: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    PrismEditor,
  },
  methods: {
    highlighter(code) {
      return highlight(code, languages[this.language]);
    },
  },
  computed: {
    classObject() {
      return {
        'field-required': this.required,
        'field-error': this.error,
      };
    }
  },
};
