import Vue from 'vue'
import './SntFeed.scss'
import { VLayout, VFlex } from 'vuetify/lib'

export default Vue.extend({
  name: 'SntFeed',
  components: { VLayout, VFlex },
  props: {
    type: {
      type: String,
      default: 'image'
    },
    src: {
      type: String,
      default: undefined
    },
    href: {
      type: String,
      default: undefined
    },
    target: {
      type: String,
      default: '_self'
    },
    width: {
      type: String,
      default: undefined
    },
    height: {
      type: String,
      default: undefined
    },
    aspectRatio: {
      type: [String, Number],
      default: undefined
    },
    html: {
      type: String,
      default: ''
    },
    reverse: {
      type: Boolean,
      default: false
    },
    vertical: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    cols () {
      return this.vertical ? 12 : 6
    }
  },
  template: `
    <div class="snt-feed">
      <v-layout
        :column="vertical"
        :reverse="reverse"
        class="snt-feed__container">
        <v-flex
          :md12="vertical"
          :md6="!vertical"
          class="snt-feed__col"
          xs12>
          <div
            v-if="type === 'video'"
            class="snt-feed__video">
            <snt-video
              :src="src"
              :width="width"
              :height="height"
            />
          </div>
          <div
            v-else
            class="snt-feed__image">
            <snt-image
              :src="src"
              :href="href"
              :target="target"
              :width="width"
              :height="height"
              :aspect-ratio="aspectRatio"
              contain />
          </div>
        </v-flex>
        <v-flex
          :md12="vertical"
          :md6="!vertical"
          class="snt-feed__col"
          xs12>
          <snt-link
            :href="href"
            :target="target">
            <template #activator>
              <div
                class="snt-feed__content"
                v-html="html" />
            </template>
          </snt-link>
        </v-flex>
      </v-layout>
    </div>
  `
})
