<template>
  <div id="visualEditor">
    <div class="ssml-app-container">
      <div class="tags-block">
        <tag-list-module />
      </div>

      <div class="tag-details-block">
        <tag-details-module :attr-buttons-data="attributeList" />
      </div>

      <div class="editor-container">
        <editable-module :merge-fields="mergeFields" :isActive="isActiveEditableModule" />
      </div>

      <merge-fields-replacer-module
        :source="this.$liteStore.get('editable/editableTmpContent')"
        :mode="'visualEditor'"
      />
      
      <player-module
        :ssml="ssml"
        :mode="'visualEditor'"
      />

      <notification-bar-module />

      <div class="tts-settings-container">
        <tts-settings-module />
      </div>
    </div>
  </div>
</template>

<script>
import NotificationBarModule from './modules/notification-bar-module/index.vue';
import TagListModule from './modules/tag-list-module/index.vue';
import TagDetailsModule from './modules/tag-details-module/index.vue';
import EditableModule from './modules/editable-module/index.vue';
import PlayerModule from './modules/player-module/index.vue';
import MergeFieldsReplacerModule from './modules/merge-fields-replacer-module/index.vue';
import TtsSettingsModule from './modules/tts-settings-module/index.vue';

export default {
  name: 'AppVisualEditor',

  components: {
    NotificationBarModule,
    EditableModule,
    PlayerModule,
    TagDetailsModule,
    TagListModule,
    MergeFieldsReplacerModule,
    TtsSettingsModule
  },

  props: {
    stepId: { type: String, default: '' },
    steps: { type: Array, default: () => [] },
    mergeFields: { type: Array, default: () => [] }
  },

  data () {
    return {
      attributeList: {}
    };
  },

  computed: {
    ssml () { return this.$liteStore.get('editable/ssmlCode'); },
    isActiveEditableModule () {
      return this.$liteStore.get('app/isModalOpen'); 
    }
  }
};
</script>

<style lang="scss" scoped>
.ssml-app-container {
  display: block;
  background: white;
}

.ssml-app-title {
  margin-top: 30px;
  margin-bottom: 30px;
  font-size: 1.125rem;
}

.tts-settings-container {
  margin-top: 1rem;
}

.ui-modal__body .ssml-app-title {
  margin-top: 0;
}

.ssml-app {
  padding-left: 20px;
  overflow: scroll;

  &-header {
    margin: 30px;
    font-size: 1.125rem;

    h1 { font-size: inherit; }
  }

  &-content { display: flex; }
}

.tags-block {
  position: relative;
  z-index: 1;
  width: auto;
  background: rgb(246, 246, 246);
  border: none;
  border-radius: 4px;
}

.tag-details-block {
  height: 50px;
}

/deep/ {
  .notification-bar {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 99;
    transform: translate(-50%, 0);
  }

  .ui-alert--type-success .ui-alert__body { background-color: rgb(226, 245, 228); }
  .ui-alert--type-error .ui-alert__body { background-color: rgb(244, 225, 230); }
  .ui-alert--type-info .ui-alert__body { background-color: rgb(224, 234, 245); }
} // deep end
</style>
 
