<template>
  <div id="codeEditor" class="code-editor-container">
    <code-editable-module
      :steps="steps"
      :step-id="stepId"
      :merge-fields="mergeFields"
    />

    <merge-fields-replacer-module :source="ssml" :mode="'codeEditor'" />

    <player-module :ssml="ssml" :mode="'codeEditor'" />

    <notification-bar-module />

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

<script>
import MergeFieldsReplacerModule from './modules/merge-fields-replacer-module/index.vue';
import NotificationBarModule from './modules/notification-bar-module/index.vue';
import CodeEditableModule from './modules/code-editable-module/index.vue';
import PlayerModule from './modules/player-module/index.vue';
import TtsSettingsModule from './modules/tts-settings-module/index.vue';

export default {
  name: 'AppCodeEditor',

  components: {
    MergeFieldsReplacerModule,
    NotificationBarModule,
    CodeEditableModule,
    PlayerModule,
    TtsSettingsModule
  },

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

  computed: {
    ssml () {
      return this.$liteStore.get('codeEditable/ssmlCode');
    }
  }
};
</script>

<style lang="scss" scoped>
.code-editor-container {
  background: white;
  .tts-settings-container {
    margin-top: 1rem;
  }
}
</style>
