<template>
  <div class="preview-block">
    <template v-if="showVisualEditorPreview">
      <template v-if="minimalistic">
        <div class="preview-block__label">
          Message
        </div>
        <editable-area 
          v-if="readonly"
          ref="editable" 
          :content="json" 
          :tagList="tagList"
        />
        <editable-module
          v-else
          :merge-fields="mergeFields"
          :isActive="isActiveEditableModule"
          :invalid="invalid"
          @editable:modified="editableModified"
        />
      </template>

      <!-- <template v-else>
        <or-tabs
          type="text"
          class="flex"
          fullwidth
        >
          <or-tab title="Text">
            <editable-area 
              ref="editable" 
              :content="json" 
              :tagList="tagList"
            />
          </or-tab>

          <or-tab title="Code">
            <or-code
              v-model="code"
              label="SSML Code"
              mode="html"
              disable-warnings
              readonly
            />
          </or-tab>
        </or-tabs>
      </template> -->
    </template>

    <template v-else-if="showCodeEditorPreview">
      <or-code
        v-model="code"
        label="Message"
        mode="html"
        disable-warnings
      />
    </template>

    <template v-else>
      <p class="visual-editor-placeholder">
        {{ emptyMessage }}
      </p>
    </template>
  </div>
</template>

<script>
import _ from 'lodash';
import EditableModule from '../../editable-module/index.vue';

export default {
  name: 'PreviewBlock',

  components: {
    EditableModule
  },

  props: {
    minimalistic: { type: Boolean, default: true },
    emptyMessage: { type: String, default: '' },
    mergeFields: { type: Array, default: () => [] },
    readonly: { type: Boolean, default: false },
    invalid: { type: Boolean, default: false }
  },

  data () {
    return {
      json: [],
      code: '',
      appMode: 'visualEditor'
    };
  },

  computed: {

    isActiveEditableModule () {
      return !this.$liteStore.get('app/isModalOpen'); 
    },
    
    tagList () {  
      return this.$liteStore.get('tagList/getTagsList'); 
    },

    showVisualEditorPreview () {
      return this.appMode === 'visualEditor';
    },

    showCodeEditorPreview () {
      return this.appMode === 'codeEditor';
    }
  },

  watch: {    
    tagList () {
      this.tagList = this.$liteStore.get('tagList/getTagsList');
    }
  },

  created () {
    this.$EventBus.$on('set::mode', mode => { this.appMode = mode; this.init(); });
    this.$EventBus.$on('schema-update::mode', mode => { this.appMode = mode; });
    this.$EventBus.$on('schema-update::code', this.init);

    this.$EventBus.$emit('get::mode');
  },

  methods: {
    init () {
      if (this.appMode === 'visualEditor') {
        this.code = this.$liteStore.get('editable/ssmlCode');
        this.json = this.$liteStore.get('editable/editableContent');

        // unset active tags for preview
        if (_.isArray(this.json)) {
          this.json = this.json.map(item => { 
            if (item.hasOwnProperty('isActive')) delete item.isActive;
            return item;
          });
        }

        this.$nextTick(() => {
          if (this.$refs.editable) this.$refs.editable.$el.contentEditable = false;
        });
      }

      if (this.appMode === 'codeEditor') {
        this.code = this.$liteStore.get('codeEditable/ssmlCode');
        this.json = [];
      }
    },

    editableModified () {
      this.$EventBus.$emit('editable-update::save');
      this.$liteStore.dispatch('editable/saveSsml');

      this.$liteStore.dispatch('codeEditable/saveEditorContent', '');

      this.$EventBus.$emit('schema-update::code', this.$liteStore.get('editable/ssmlCode'));
      this.$EventBus.$emit('schema-update::json', _.cloneDeep(this.$liteStore.get('editable/editableContent')));
    }

  }
};
</script>

<style lang="scss" scoped>
.visual-editor-placeholder {
  color: rgb(145, 150, 157);
  font-size: 12px;
}

.preview-block {
  
  &__label {
    color: #91969d;
    font-size: 12px;
    line-height: 24px;
  }
  
  /deep/ #editable.editable {
    padding: 1rem;
    min-height: 96px;
  }

  .or-code {
    height: calc(96px + 36px);
  }
}

/deep/ {
  .text-wrapper { pointer-events: none; }
}
</style>
