<template>
  <div>
    <div class="dof-rich-text" :style="outputTextStyle" v-if="isNotEmptyArray">
      <div v-for="v in configList">
        <dof-rich-text-text v-if="v.type=='text' && v.value"
                            :text-value="v.value"
                            :text-style="v.style"
                            :has-text-margin="hasTextMargin"
                            :text-theme="v.theme"></dof-rich-text-text>

        <dof-rich-text-link v-if="v.type=='link' && v.href && v.value"
                            :link-value="v.value"
                            :link-href="v.href"
                            :link-style="v.style"
                            :has-text-margin="hasTextMargin"
                            :link-theme="v.theme"></dof-rich-text-link>

        <dof-rich-text-icon v-if="v.type=='icon' && v.src"
                            :icon-src="v.src"
                            :icon-style="v.style"></dof-rich-text-icon>

        <dof-rich-text-tag v-if="v.type=='tag' && v.value"
                           :tag-value="v.value"
                           :tag-theme="v.theme"
                           :tag-style="v.style"></dof-rich-text-tag>
      </div>
    </div>
    <div class="string-text">
      <text class="default-text" :style="textStyle" v-if="isString">{{configList}}</text>
    </div>
  </div>
</template>

<style scoped>
  .dof-rich-text {
    align-items: center;
    flex-direction: row;


    /*
    flex-wrap: wrap;
    word-wrap:break-word;
    word-break:break-all;
    align-items: center;
    justify-content: flex-start;

    overflow: hidden; 
    white-space: wrap;  
    text-overflow: ellipsis;   
     */
  }

  /* .dof-rich-text > *{
    display: inline !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  } */

  .default-text {
    color: #A5A5A5;
    font-size: 24px;
    line-height: 30px;
  }
</style>

<script>

  export default {
    components: {
      DofRichTextText: require('./dof-rich-text-text.vue'),
      DofRichTextLink: require('./dof-rich-text-link.vue'),
      DofRichTextIcon: require('./dof-rich-text-icon.vue'),
      DofRichTextTag: require('./dof-rich-text-tag.vue')
    },
    props: {
      configList: {
        type: [Array, String],
        default: function () {
          return [];
        }
      },
      hasTextMargin: {
        type: Boolean,
        default: true
      },
      textStyle: {
        type: Object,
        default: () => ({})
      }
    },
    data: () => ({}),
    computed: {
      isNotEmptyArray () {
        const obj = this.configList;
        return obj && obj.length > 0 && Array.isArray(obj) && typeof obj !== 'undefined';
      },
      isString () {
        return typeof (this.configList) === 'string';
      },
      outputTextStyle () {
        const { textStyle } = this;
        return { ...textStyle };
      }
    }
  };
</script>
