<template>
  <div id="mergeFieldsReplacerModal">
    <div class="text-pane">
      <or-icon>warning</or-icon> <span>To generate a test audio, please replace used merge tags with static values.</span>
    </div>

    <div class="columns">
      <div class="col">
        <span class="col__title">Merge field name</span>
        <or-textbox
          v-for="mergeField in localMergeFields"
          :key="mergeField.original"
          v-model="mergeField.variable"
          disabled
        />
      </div>
      
      <div class="col">
        <span class="col__title">Static value</span>
        <or-textbox v-for="mergeField in localMergeFields" :key="mergeField.original" v-model="mergeField.replacer" />
      </div>
    </div>
  </div>
</template>

<script>
import { getMergeFieldsFromString, getMergeFieldVariableName } from '../../../utils/string-helpers.js';
import { getObjects } from '../../../utils/parse.js';
import Vue from 'vue';

export default {
  name: 'MergeFieldsReplacerModal',

  props: {
    // eslint-disable-next-line
    source: '',
    mode: { type: String, default: 'visualEditor' }
  },

  data () {
    return {
      localMergeFields: []
    };
  },

  computed: {
    mergeFields () { return this.$liteStore.get('mergeFieldsReplacer/mergeFields'); }
  },

  watch: {
    localMergeFields: {
      deep: true,
      handler () {
        this.$emit('merge-fileds::manage-save', !this.localMergeFields.some(mergeField => mergeField.replacer === ''));
      }
    }
  },

  created () {
    this.$EventBus.$on('merge-fields::save', this.saveMergeFields);
  },

  mounted () {
    if (this.mode === 'codeEditor') this.getMergeFieldsFromString();
    if (this.mode === 'visualEditor') this.getMergeFieldsFromJson();

    this.syncLocalAndSavedMergeFieldsReplaceValues();
  },

  methods: {
    getMergeFieldsFromString () {
      this.localMergeFields = getMergeFieldsFromString(this.source)
        .filter((item, index, array) => array.indexOf(item) === index)
        .map(mergeField => ({
          original: mergeField,
          variable: getMergeFieldVariableName(mergeField),
          replacer: ''
        })
        );
    },

    getMergeFieldsFromJson () {
      const mergeFieldTags = getObjects(this.source, 'type', 'merge-field');
      this.localMergeFields = [...new Set(mergeFieldTags
        .map(mergeField => mergeField.original))]
        .map(item => {
          return {
            original: item,
            variable: mergeFieldTags.find(mergeField => mergeField.original === item).variable,
            replacer: mergeFieldTags.find(mergeField => mergeField.original === item).replacer
          };
        });
    },

    syncLocalAndSavedMergeFieldsReplaceValues () {
      this.localMergeFields.forEach(localMergeField => {
        const match = this.mergeFields.find(mergeField => mergeField.original === localMergeField.original);
        if (match) Vue.set(localMergeField, 'replacer', match.replacer);
      });
    },

    saveMergeFields () {
      this.$liteStore.dispatch('mergeFieldsReplacer/saveMergeFields', this.localMergeFields);
    }
  }
};
</script>

<style lang="scss" scoped>
.text-pane {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-radius: 4px;
  background: #eee;
  
  .ui-icon {
    font-size: 1rem;
    margin-right: 15px;
    margin-bottom: 2px;
    color: #ff9800;
  }
}

.columns {
  display: flex;
  flex-wrap: wrap;
  padding: 15px 0;
  
  .col {
    flex: 1;
    
    &:not(:last-child) { padding-right: 4px; }
    &:not(:first-child) { padding-left: 4px; }
    
    &__title {
      display: inline-block;
      margin-bottom: 0.25em;
      font-size: 0.75rem;
      color: #91969d;
    }
    
    .ui-textbox {
      &:not(:last-child) { margin-bottom: 8px; }
      &:last-child { margin-bottom: 0; }
    }
  }
  
  .row {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    
    &:not(:last-child):not(.row--header) { margin-bottom: 8px; }
    
    &--header {
      padding-left: 16px + 4px * 2;
    }
    
    .ui-checkbox {
      margin: 8px 4px 8px 0;
    }
    
    .ui-textbox {
      flex: 1;
      margin-bottom: 0;
      
      &:not(:last-child) { margin-right: 4px; }
      &:not(:first-child) { margin-left: 4px; }
    }
  }
}
</style>
