import Vue from 'vue'
import './SntImage.scss'
import { VImg } from 'vuetify/lib'

export default Vue.extend({
  name: 'SntImage',
  components: { VImg },
  props: {
    src: {
      type: String,
      default: ''
    },
    lazySrc: {
      type: String,
      default: ''
    },
    href: {
      type: String,
      default: ''
    },
    target: {
      type: String,
      default: '_self'
    },
    to: {
      type: Object,
      default: undefined
    },
    width: {
      type: String,
      default: undefined
    },
    height: {
      type: String,
      default: undefined
    },
    minWidth: {
      type: String,
      default: undefined
    },
    minHeight: {
      type: String,
      default: undefined
    },
    maxWidth: {
      type: String,
      default: undefined
    },
    maxHeight: {
      type: String,
      default: undefined
    },
    aspectRatio: {
      type: [String, Number],
      default: undefined
    },
    contain: {
      type: Boolean,
      default: false
    }
  },
  template: `
    <div
      class="snt-image"
      v-on="$listeners">
      <div class="snt-image__container">
        <snt-link
          v-if="href || to"
          :to="to"
          :target="target"
          :href="href"
          class="snt-image__link">
          <template #activator>
            <v-img
              :src="src"
              :lazy-src="lazySrc"
              :width="width"
              :height="height"
              :contain="contain"
              :aspect-ratio="aspectRatio"
              class="snt-image__img">
              <slot />
            </v-img>
          </template>
        </snt-link>
        <v-img
          v-else
          :src="src"
          :lazy-src="lazySrc"
          :width="width"
          :height="height"
          :contain="contain"
          :aspect-ratio="aspectRatio"
          class="snt-image__img">
          <slot />
        </v-img>
      </div>
    </div>
  `
})
