<template>
  <div class="hotpay-header" :style="generateStyles">
    <hotpay-countdown :data="data.countdown" v-if="data.countdown" />

    <div class="hotpay-header-image">
      <img :src="data.banner" :alt="data.title.content" class="hotpay-header-banner">
    </div>

    <div class="hotpay-header-content" v-if="hasTitle || hasSubtitle || data.image">
      <div class="column column-2">
        <hotpay-title :data="data.title" v-if="hasTitle" />
        <hotpay-subtitle :data="data.subtitle" v-if="hasSubtitle" />
      </div>

      <div class="column column-1 hotpay-header-product" v-if="data.image">
        <hotpay-image :data="data.image" :full="true" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  @import '../stylesheets/variables.scss';

  .hotpay-header {
    width: auto;
    margin: 0 -12px;
    position: relative;

    .hotpay-countdown {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
    }
  }

  .hotpay-header-banner {
    width: 100%;
  }

  .hotpay-header-image {
    height: 325px;
    overflow: hidden;
  }

  .hotpay-header-product {
    height: 250px;
    max-width: 310px;

    .hotpay-image {
      height: 100%;
    }
  }

  .hotpay-header-content {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;

    &:before {
      height: 100%;
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      transform: rotate(-180deg);
      opacity: 0.7;
      background-image: linear-gradient(to top, rgba(#000, 0), #000);
      content: " "
    }

    .column {
      margin: 0 12px;
      position: relative;
      z-index: 2;

      &:first-child {
        display: flex;
        flex-direction: column;
      }
    }

    .column-1 {
      flex: 0 1 33.3333%;
    }

    .column-2 {
      flex: 0 1 66.6666%;
    }

    .hotpay-title,
    .hotpay-subtitle {
      color: #fff;
    }

    .hotpay-image {
      margin-top: 24px;
      background: #fff;

      img {
        min-height: 100%;
        min-width: 100%;
      }
    }
  }
</style>

<script>
  import HotpayTitle from '../HotpayTitle/HotpayTitle'
  import HotpayImage from '../HotpayImage/HotpayImage'
  import HotpayCountdown from '../HotpayCountdown/HotpayCountdown'

  export default {
    name: 'hotpay-header',
    components: {
      HotpayTitle,
      HotpayImage,
      HotpayCountdown
    },
    props: {
      data: Object
    },
    computed: {
      hasTitle () {
        return Boolean(this.data.title && this.data.title.content)
      },
      hasSubtitle () {
        return Boolean(this.data.subtitle && this.data.subtitle.content)
      },
      generateStyles () {
        return {
          width: this.progress
        }
      }
    }
  }
</script>
