<template>
  <section class="card" :class="`card--${cardStyle}`">
    <router-link v-if="link" class="card__overlay-link" :to="link" :target="linkTarget"></router-link>
    <figure class="card__image-wrapper" :class="`card__image-wrapper--${cardStyle}`" v-if="image && cardStyle !== 'text' && cardStyle !== 'text-color'">
      <image-item
        class="card__image"
        :source="image"
        :alt="imageAlt"
      ></image-item>
    </figure>
    <div class="card__content-wrapper" :class="`card__content-wrapper--${cardStyle}`" v-if="cardStyle !== 'only-image'">
      <figure class="card__content-image" :class="`card__content-image--${cardStyle}`" v-if="cardStyle === 'image'">
        <image-item
          :source="image"
          :alt="imageAlt"
        ></image-item>
      </figure>
      <header class="card__header" :class="`card__header--${cardStyle}`" v-if="title && cardStyle !== 'basic-image'">
        <h2 v-text="title"></h2>
      </header>
      <p class="card__content" :class="`card__content--${cardStyle}`" v-if="content && cardStyle !== 'basic-image'" v-text="content"></p>
      <router-link v-if="link && linkText" :class="`card__link--${cardStyle}`" tabindex="-1" class="card__link" :to="link" :target="linkTarget" v-html="linkText"></router-link>
      <button class="card__cta" :class="`card__cta--${cardStyle}`" v-if="!link && linkText" @click.stop.prevent="$emit('callback')" v-html="linkText"></button>
    </div>
  </section>
</template>

<script>
export default {
  name: 'card',
  components: {
    ImageItem: () => import('@/components/images/ImageItem.vue'),
  },
  props: {
    cardStyle: {
      type: String,
      required: true,
      default: 'basic',
      validator: (val) => {
        return [
          'basic',
          'basic-boxed',
          'basic-image-left',
          'basic-image-right',
          'basic-image',
          'image',
          'only-image',
          'text',
          'text-color',
        ].indexOf(val) !== -1;
      }
    },
    image: {
      type: String,
      required: false,
    },
    imageAlt: {
      type: String,
      required: false,
    },
    title: {
      type: String,
      required: false,
    },
    content: {
      type: String,
      required: false,
    },
    link: {
      type: String,
      required: false,
    },
    linkText: {
      type: String,
      required: false,
    },
    linkTarget: {
      type: String,
      required: false,
      default: '_self',
      validator: (val) => {
        return ['_self', '_blank'].indexOf(val) !== -1;
      }
    },
    shadow: {
      type: Boolean,
      required: false,
      default: true,
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background-color: $white;
  box-shadow: box-shadow(quinary);
  display: flex;
  flex-direction: column;
  &--basic-image {
    min-height: 410px;
    min-height: 41rem;
    height: 100%;
  }
  &--basic-image-left, &--basic-image-right {
    flex-direction: row;
    @include media-breakpoint-down(sm) {
      flex-direction: column;
    }
  }
  &--text, &--text-color {
    border-radius: border-radius(secondary);
  }
  &--text-color {
    background-color: $color-primary;
  }
  &--image {
    min-height: 370px;
    min-height: 37rem;
    height: 100%;
    border-radius: border-radius(secondary);
  }
  &--only-image {
    min-height: 420px;
    min-height: 42rem;
    height: 100%;
    border-radius: border-radius(secondary);
  }
  &__overlay-link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
  }
  &__image-wrapper {
    width: 100%;
    margin: 0;
    &--basic {
      height: 170px;
      height: 17rem;
      margin-bottom: 15px;
      margin-bottom: 1.5rem;
    }
    &--basic-boxed {
      padding: 10px 10px 0px 10px;
      padding: 1rem 1rem 0rem 1rem;
      height: 150px;
      height: 15rem;
      margin-bottom: 25px;
      margin-bottom: 2.5rem;
    }
    &--basic-image {
      height: calc(100% - 70px);
      height: calc(100% - 7rem);
    }
    &--basic-image-left, &--basic-image-right {
      flex-basis: 170px;
      flex-basis: 17rem;
      flex-shrink: 0;
    }
    &--basic-image-right {
      order: 2;
    }
    &--only-image {
      height: 100%;
    }
  }
  &__image {
    /deep/
    img {
      object-fit: cover;
      object-position: center;
      width: 100%;
      height: 100%;
    }
  }
  &__content-wrapper {
    position: relative;
    flex-grow: 1;
    &--basic, &--basic-boxed {
      padding-bottom: 65px;
      padding-bottom: 6.5rem;
    }
    &--basic-image-left {
      padding-bottom: 75px;
      padding-bottom: 7.5rem;
      padding-left: 10px;
      padding-left: 1rem;
    }
    &--basic-image-right {
      padding-bottom: 75px;
      padding-bottom: 7.5rem;
      padding-right: 10px;
      padding-right: 1rem;
      order: 1;
    }
    &--text, &--text-color {
      padding: 25px 0px 75px 0px;
      padding: 2.5rem 0rem 7.5rem 0rem;
    }
    &--image {
      position: absolute;
      bottom: 0;
      left: 0;
      padding-bottom: 50px;
      padding-bottom: 5rem;
    }
  }
  &__content-image {
    position: absolute;
    overflow: hidden;
    top: 50%;
    left: 50%;
    width: 115%;
    height: 125%;
    transform: translate(-50%,-50%);
    margin: 0;
    /deep/
    img {
      object-fit: cover;
      object-position: bottom center;
      width: 100%;
      height: 100%;
      filter: blur(15px);
    }
  }
  &__header {
    padding: 0px 30px;
    padding: 0rem 3rem;
    h2 {
      @include body-big(medium);
    }
    &--image, &--text-color {
      position: relative;
      h2 {
        color: $white;
      }
    }
  }
  &__content {
    padding: 0px 30px;
    padding: 0rem 3rem;
    @include body-small;
    margin: 0;
    &--image, &--text-color {
      position: relative;
      color: $white;
    }
  }
  &__link, &__cta {
    position: absolute;
    left: 30px;
    left: 3rem;
    bottom: 20px;
    bottom: 2rem;
    @include body-small(medium, bs, $color-primary, tertiary, quaternary);
    &--text {
      bottom: 30px;
      bottom: 3rem;
    }
    &--basic-image-left {
      left: 40px;
      left: 4rem;
    }
    &--image, &--text-color {
      left: 30px;
      left: 3rem;
      bottom: 20px;
      bottom: 2rem;
      color: $white;
    }
  }
}
</style>

