import Vue from 'vue'
import './SntFeeds.scss'

export default Vue.extend({
  name: 'SntFeeds',
  props: {
    type: {
      type: String,
      default: 'image'
    },
    title: {
      type: String,
      default: ''
    },
    items: {
      type: Array,
      default: () => ([])
    },
    size: {
      type: String,
      default: 'medium'
    },
    vertical: {
      type: Boolean,
      default: false
    },
    itemWidth: {
      type: String,
      default: undefined
    },
    itemHeight: {
      type: String,
      default: undefined
    },
    itemAspectRatio: {
      type: [String, Number],
      default: undefined
    },
    noGutters: {
      type: [Boolean],
      default: false
    },
    cols: {
      type: [Boolean, String, Number],
      default: undefined
    },
    lg: {
      type: [Boolean, String, Number],
      default: false
    },
    md: {
      type: [Boolean, String, Number],
      default: false
    },
    sm: {
      type: [Boolean, String, Number],
      default: false
    },
    xl: {
      type: [Boolean, String, Number],
      default: false
    }
  },
  computed: {
    feeds () {
      return this.items.map((item, i) => this.$_.defaults(
        this.$_.cloneDeep(item),
        {
          sequence: i + 1,
          type: this.type,
          src: '',
          target: '_self',
          html: '',
          vertical: this.vertical,
          visible: true,
          reverse: false
        }
      )).filter((item) => item.visible)
    }
  },
  template: `
    <div class="snt-feeds">
      <snt-container
        class="snt-feeds__container"
        fluid>
        <div
          v-if="title"
          class="snt-feeds__title">
          {{ title }}
        </div>
        <snt-row :no-gutters="noGutters">
          <template v-for="(item, i) in feeds">
            <snt-col
              v-if="!item.hidden"
              :key="'feed-'+i"
              :cols="cols"
              :lg="lg"
              :md="md"
              :sm="sm"
              :xl="xl">
              <snt-feed
                :type="item.type"
                :src="item.src"
                :html="item.html"
                :href="item.href"
                :target="item.target"
                :width="itemWidth"
                :height="itemHeight"
                :aspect-ratio="itemAspectRatio"
                :vertical="item.vertical" />
            </snt-col>
          </template>
        </snt-row>
      </snt-container>
    </div>
  `
})
