<template>
  <div :class="draftActiveStepGetter.componentName">
    <label :for="localFormElement.key" :class="$attrs.labelClass ?? 'col-md-3'"
      >{{ getLabel() }}:</label
    >
    <div>
      <codemirror
        :options="cmOptions"
        class="markdown-preview"
        v-model="textValue"
        :type="localFormElement.type"
        :id="localFormElement.key"
        :name="localFormElement.key"
        ref="myCm"
      ></codemirror>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import formBuilderMixin from "@mixins/formBuilderMixin";

import { codemirror } from "vue-codemirror";
import "vue-codemirror/node_modules/codemirror/lib/codemirror.css";
import "vue-codemirror/node_modules/codemirror/mode/markdown/markdown.js";
import "vue-codemirror/node_modules/codemirror/mode/javascript/javascript.js";
import "vue-codemirror/node_modules/codemirror/mode/css/css.js";
import "vue-codemirror/node_modules/codemirror/mode/vue/vue.js";
import "vue-codemirror/node_modules/codemirror/mode/htmlmixed/htmlmixed.js";
import "vue-codemirror/node_modules/codemirror/addon/edit/closebrackets.js";
import "vue-codemirror/node_modules/codemirror/addon/edit/matchbrackets.js";
import "vue-codemirror/node_modules/codemirror/addon/edit/closetag.js";
import "vue-codemirror/node_modules/codemirror/addon/display/placeholder.js";
import "vue-codemirror/node_modules/codemirror/addon/scroll/simplescrollbars.js";
import "vue-codemirror/node_modules/codemirror/addon/scroll/simplescrollbars.css";
import "vue-codemirror/node_modules/codemirror/addon/selection/active-line.js";

export default {
  mixins: [formBuilderMixin],
  data() {
    return {
      textValue: "",
      cmOptions: {
        mode: "markdown",
        theme: "default",
        lineNumbers: false,
        placeholder: "",
        lineWrapping: true,
        readOnly: false,
        tabindex: 0,
        autofocus: true,
        matchBrackets: true,
        direction: "rtl",

        // styleActiveLine: true,
      },
    };
  },
  mounted() {
    this.cmOptions.placeholder = this.localFormElement.placeholder;
  },
  computed: {
    ...mapGetters("entity", ["draftActiveStepGetter"]),
  },
  components: {
    codemirror,
  },
};
</script>

<style lang="scss">
.markdown-preview {
  .CodeMirror-scroll {
    font-family: sahel;
  }
  
  .cm-s-default {
    box-shadow: 0px 5px 8px 4px #eee;
    border-radius: 0.5em;    
    border: 1px solid #eee;
    .cm-header-1 {
      font-size: 2em;
    }
    .cm-header-2 {
      font-size: 1.75em;
    }
    .cm-header-3 {
      font-size: 1.5em;
    }
    .cm-header-4 {
      font-size: 1.25em;
    }
    .cm-header-5 {
      font-size: 1em;
    }
    .cm-header-6 {
      font-size: 0.875em;
    }
  }
  .CodeMirror-sizer {
    top: 1em;
    margin-right: 1.5em;
    margin-left: 1.5em !important;
  }
  .CodeMirror-placeholder {
    color: #cdcdcd !important;
  }

  .CodeMirror-hscrollbar {
    display: none !important;
  }
}
.EntityImportSection {
  .cm-s-default {
    height: calc(100vh - 22em);

    .CodeMirror-line {
      line-height: 2;
    }
  }
}
</style>
