<template>
  <div class="summary-content">
    <section class="section section--lineitems">
      <h2 class="section__title">Summary</h2>

      <ul class="lineitems">
        <li class="lineitem">
          <div class="lineitem__mrg lineitem__info">
            <template v-if="isPresent(program.summary_title)">
              {{ program.summary_title }}
            </template>
            <template v-else>
              <template v-if="[48, 47, 46, 49, 50, 51, 52, 53].includes(program.id)">
                {{ program.stripe_plan.interval_count }} Combo Pack
              </template>
              <template v-else-if="program.stripe_plan && !program.stripe_plan.should_renew">
                {{ program.stripe_plan.interval_count }} Month plan
              </template>
              <template v-else>
                Monthly subscription
              </template>
            </template>
            <strong class="text-right">{{formattedPrice(totalOldPrice)}}</strong>
          </div>
          <div v-if="program.trial && isPresent(program.trial_price)" class="lineitem__mrg lineitem__info">
            First Month At
            <strong class="text-right">{{formattedPrice(program.trial_price)}}</strong>
          </div>
          <div v-if="program.trial || isPresent(program.old_price)" class="lineitem__mrg lineitem__info lineitem__info--pink">
            You saved
            <strong class="text-right">{{formattedPrice(savedPrice)}}</strong>
          </div>
          <div class="lineitem__mrg lineitem__info">
            Shipping
            <strong class="text-right">FREE</strong>
          </div>
        </li>
        
        <li class="lineitem">
          <div class="lineitem__info lineitem__info--marginless">
            <strong class="text-right">Total</strong>

            <div>
              <span v-if="program.trial || isPresent(program.old_price)" class="lineitem__oldprice">{{totalOldPrice}}</span>
              <strong class="text-right">{{formattedPrice(totalPrice)}}</strong>
            </div>
          </div>
        </li>
      </ul>
    </section>

    <button class="button button--cta" @click="submitPayment">Go To Payment</button>
  </div>
</template>
<script>
import isPresent from '@/utils/isPresent'
export default {
  props: {
    program: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    isPresent,
    formattedPrice(price) {
      return Number(price).toLocaleString('en', { style: 'currency', currency: this.program.currency })
    },
    submitPayment() {
      this.$emit('submitpayment')
    }
  },
  computed: {
    totalOldPrice () {
      if (this.program.trial)
        return this.program.price
      else
        return this.program.old_price || this.program.price
    },
    savedPrice () {
      return Number(this.totalOldPrice) - Number(this.totalPrice)
    },
    totalPrice () {
      return this.program.trial ? this.program.trial_price : this.program.price
    }
  }
}
</script>
<style lang="scss" scoped>
.summary-content .section {
  margin-bottom: 30px;
}

.lineitems {
  margin: 0 -15px;
}
.lineitem {
  border-bottom: 1px solid $color_gray_medium;
  padding: $gutter_mobile;
  list-style: none;

  &:first-child {
    padding-top: 0;
  }
}

  .lineitem__content {
    flex-grow: 1;
    color: $color_text;
    font-size: 13px;
  }

  .lineitem__mrg {
    margin-bottom: 2px;
    display: block;
  }
  .lineitem__info {
    font-size: 16px;
    color: $color_title;
    margin-bottom: 2*$gutter;
    display: flex;
    justify-content: space-between;

    &--pink {
      color: $color_primary;
      font-weight: bold;

      strong {
        font-weight: bold;
      }
    }

    &--marginless {
      margin: 0;
    }
  }
  .lineitem__oldprice {
    text-decoration: line-through;
    color: $color_text;
    margin-right: 3 * $gutter;
  }

  .text-right {
    text-align: right;
  }
</style>