<template>
  <div class="snt-feeds">
    <v-container
      class="snt-feeds__container"
      fluid>
      <div
        v-if="title"
        class="snt-feeds__title">
        {{ title }}
      </div>
      <v-row :no-gutters="noGutters">
        <template v-for="(item, i) in feeds">
          <v-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" />
          </v-col>
        </template>
      </v-row>
    </v-container>
  </div>
</template>

<script>
import SntFeed from './Feed.vue'

export default {
  components: { SntFeed },
  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
    }
  },
  data () {
    return { }
  },
  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)
    }
  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style scoped>
  .snt-feeds {
    position: relative;
  }
  .snt-feeds__container {
    padding: 0;
  }
  .snt-feeds__title {
    font-size: 1.25rem;
    padding: 12px 0;
  }
</style>
