<template>
  <div>
    <div v-b-toggle.html class="vb-body-right-option pointer option-head">HTML</div>
    <b-collapse id="html" visible>
      <!-- <codemirror Mode='Text/Html' style="width:100%"></codemirror> -->
      <codemirror :value="widgetType[selectedWidget.parentRow].columns[selectedWidget.column].rows[selectedWidget.row].style[2].code" :options="cmOptions" @input="onCmCodeChange" style="width: 97%; margin: 0px 5px 5px 5px;"></codemirror>
    </b-collapse>
  </div>
</template>

<script>
import "codemirror/mode/htmlmixed/htmlmixed.js";
import "codemirror/addon/merge/merge.css";
import "codemirror/addon/merge/merge.js";

import { codemirror } from "vue-codemirror";

import "codemirror/lib/codemirror.css";

export default {
  props: {
    widgetType: {
      type: Array
    },
    selectedWidget: {
      type: Object
    }
  },
  data() {
    return {
        
        cmOptions: {
        // codemirror options
        tabSize: 4,
        mode: 'text/javascript',
        theme: 'base16-dark',
        lineNumbers: true,
        line: true,
      },
    };
  },
  components: {
    // codemirror,
    codemirror
  },
  methods: {
      onCmCodeChange(newCode) {
      console.log('this is new code', newCode)
      this.widgetType[this.selectedWidget.parentRow].columns[this.selectedWidget.column].rows[this.selectedWidget.row].style[2]['code'] = newCode
    }
  }
};
</script>

<style>
</style>
