<template>
  <div id="app" class="container-tiny">
    <div class="sec-header">
      <div class="sec-header__bg"><header-bg/></div>
      <div class="sec-header__icon">
        <svg width="63" height="64" viewBox="0 0 63 64" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M24.5149 21.5607L7.66923 28.4513C7.50751 28.5175 7.37556 28.6255 7.28078 28.7578C7.27227 28.7664 7.26393 28.7752 7.25575 28.7842L0.230537 36.5149C0.134237 36.6211 0.0650325 36.7489 0.0288268 36.8876C-0.00737885 37.0262 -0.00951172 37.1716 0.0226101 37.3112C0.0547319 37.4509 0.120155 37.5807 0.213301 37.6896C0.306446 37.7985 0.42455 37.8833 0.55754 37.9367L7.02203 40.524V55.7361C7.02221 55.925 7.08261 56.109 7.19446 56.2613C7.30632 56.4136 7.4638 56.5262 7.64404 56.5829L30.7925 63.946C30.8893 63.9814 30.9925 64 31.0976 64C31.218 64 31.336 63.9755 31.4447 63.9294L54.5493 56.5802C54.7295 56.5236 54.887 56.4109 54.9989 56.2586C55.1107 56.1063 55.1711 55.9224 55.1713 55.7334V40.5285L61.6429 37.9394C61.7759 37.886 61.894 37.8012 61.9872 37.6923C62.0803 37.5834 62.1457 37.4536 62.1779 37.3139C62.21 37.1743 62.2078 37.0289 62.1716 36.8902C62.1354 36.7516 62.0662 36.6237 61.9699 36.5176L54.9447 28.7869C54.8507 28.6834 54.734 28.6041 54.6046 28.5546C54.5119 28.4365 54.3883 28.3402 54.2394 28.2793L38.488 21.8352V23.7702L52.0766 29.3294L31.1076 37.9133L10.192 29.3544L24.5149 23.4956V21.5607ZM23.7223 47.1398C23.609 47.1398 23.4968 47.1181 23.3917 47.0759L8.79921 41.2353V55.0839L30.209 61.8967L30.209 41.0184L24.3532 46.8742C24.2708 46.958 24.1726 47.0246 24.0643 47.0702C23.956 47.1158 23.8398 47.1395 23.7223 47.1398ZM31.9861 41.0165V61.8958L53.3941 55.0839V41.2395L38.8061 47.0759C38.7016 47.1178 38.59 47.1396 38.4773 47.1398C38.2417 47.1398 38.0157 47.0461 37.8491 46.8795L31.9861 41.0165ZM2.4067 36.762L23.509 45.2036L29.5266 39.1869L8.15234 30.4432L2.4067 36.762ZM53.9896 39.0856L59.7938 36.7637L54.0481 30.4441L32.673 39.1869L38.6915 45.2054L53.9164 39.1149C53.9403 39.1041 53.9648 39.0943 53.9896 39.0856Z" fill="#EC3FAA"/>
          <path d="M29.7895 8.50476C30.3284 6.8464 32.6745 6.8464 33.2133 8.50476L34.4429 12.2891C34.9517 13.8548 36.4107 14.9148 38.057 14.9148H42.036C43.7797 14.9148 44.5047 17.1461 43.0941 18.1711L39.8749 20.5099C38.5431 21.4776 37.9858 23.1928 38.4945 24.7584L39.7241 28.5428C40.2629 30.2011 38.3648 31.5802 36.9542 30.5552L33.735 28.2164C32.4032 27.2487 30.5997 27.2487 29.2678 28.2164L26.0487 30.5552C24.638 31.5802 22.7399 30.2011 23.2788 28.5428L24.5084 24.7584C25.0171 23.1928 24.4598 21.4776 23.128 20.5099L19.9088 18.1711C18.4981 17.1461 19.2231 14.9148 20.9668 14.9148H24.9459C26.5922 14.9148 28.0512 13.8548 28.5599 12.2891L29.7895 8.50476Z" stroke="#EC3FAA" stroke-width="2"/>
        </svg>
      </div>

      <h2 class="sec-header__content">
        <span class="sec-header__title">Gocase Club</span>
        <span class="sec-header__subtitle">Subscription</span>
      </h2>
    </div>

    <div class="widget-msg">
      <strong class="widget-msg__title">Selected Plan: {{ programTitle }}</strong>
      <p class="widget-msg__description">{{ programDescription }}</p>
    </div>

    <div class="tabs">
      <div class="tabs__list">
        <div
          :class="['tabs__item', { active: selectedOption == 'tab1' }]"
          @click="selectOption('tab1')"
        >
          Profile
        </div>

        <div
          :class="['tabs__item', { active: selectedOption == 'tab2' }]"
          @click="selectOption('tab2')"
        >
          Summary
        </div>

        <div
          :class="['tabs__item', { active: selectedOption == 'tab3' }]"
          @click="selectOption('tab3')"
        >
          Payment
        </div>
      </div>

      <div
        :class="['tabs__content', { active: selectedOption == 'tab1' }]"
        v-show="selectedOption == 'tab1'"
      >
        <subscription-form
          v-if="program.id"
          :program="program"
          @updatesubscription="updateSubscriptionValidity"
          @submitsubscription="submitSubscription"
        />
      </div>

      <div
        :class="['tabs__content', { active: selectedOption == 'tab2' }]"
        v-show="selectedOption == 'tab2'"
      >
        <subscription-summary
          v-if="program.id"
          :program="program"
          @submitpayment="submitPayment"
        />
      </div>

      <div
        :class="['tabs__content', { active: selectedOption == 'tab3' }]"
        v-show="selectedOption == 'tab3'"
      >
      <paypal-button
        v-if="program.id"
        :paypalPlanId='program.paypal_plan_id'
        :programData='program'
        :subscription='formattedSubscription'
        :stripePlanId="program.stripe_plan_id"
        :stripe-info="subscription.stripeInfo"
      >
      </paypal-button>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderBg from '@/components/icons/HeaderBg.vue'
import SubscriptionForm from '@/components/SubscriptionForm.vue'
import SubscriptionSummary from '@/components/SubscriptionSummary.vue'
import PaypalButton from '@/components/PaypalButton.vue';
import isPresent from '@/utils/isPresent'

export default {
  name: 'App',
  components: {
    HeaderBg,
    SubscriptionForm,
    SubscriptionSummary,
    PaypalButton
  },
  data: () => ({
    tab: null,
    selectedOption: 'tab1',
    subscription: {},
    program: {},
    subscriptionValid: false
  }),
  methods: {
    submitSubscription (event) {
      this.subscription = event.subscription
      this.subscriptionValid = true
      this.selectOption('tab2')
    },
    submitPayment () {
      this.selectOption('tab3')
    },
    updateSubscriptionValidity (event) {
      this.subscriptionValid = event.valid
      this.subscription = event.subscription
    },
    selectOption (value) {
      if (value === 'tab1')
        this.selectedOption = value
      else if ((value === 'tab3' || value === 'tab2') && this.subscriptionValid)
        this.selectedOption = value
    },
    fetchProgram() {
      if (this.programCode === undefined) return
      this.$axios.get(`${process.env.VUE_APP_GOSUBS_HOST}/api/program/${this.programCode}`)
      .then((r) => {
        this.program = r.data;
        this.subscription.program_id = r.data.id;
        this.loaded = true
      })
      .catch(() => {
        location.replace('/gocase-subscription-box')
      });
    },
  },
  computed: {
    programCode() {
      return this.$route.params.program_code;
    },
    formattedSubscription () {
      return { ...this.subscription, program_id: this.program.id }
    },
    programTitle () {
      return isPresent(this.program.display_title) ? this.program.display_title : this.program.title
    },
    programDescription () {
      return this.program.description
    }
  },
  watch: {
    selectedOption (newVal) {
      this.$emit('selectoption', newVal)
    }
  },
  created() {
    this.fetchProgram();
  },
};
</script>

<style lang="scss">
.container-tiny {
  margin-right: auto;
  margin-left: auto;
  max-width: 460px;
}

.sec-header {
  padding: 10*$gutter 0 30px;
  position: relative;

  &__bg {
    width: 314px;
    height: 188px;
    position: absolute;
    top: 0;
    left: -15px;
    z-index: -1;

    svg {
      display: block;
    }
  }
}

.sec-header__icon {
  width: 62.2px;
  margin-bottom: 3*$gutter;
  svg {
    max-width: 100%;
    display: block;
  }
}
.sec-header__content {
  font-size: 24px;
  font-weight: 900;
  line-height: 22px;
}
  .sec-header__title {
    color: $color_title;
    display: block;
  }
  .sec-header__subtitle {
    color: $color_primary;
  }

.widget-msg {
  padding: $gutter_mobile;
  border: 1px solid $color_primary;
  border-radius: 12px;
  display: block;
  margin: 30px 0 ;
}
.widget-msg__title {
  display: block;
  line-height: normal;
  font-size: 16px;
  font-weight: bold;
  line-height: 16px;
  margin-bottom: 3*$gutter;
  color: $color_title;
}
.widget-msg__description {
  color: $color_text;
  font-size: 13px;
  line-height: 16px;
  margin-bottom: 2px;
}

.tabs {
  width: 100%;
}
.tabs__list {
  display: flex;
  border-top: 1px solid $color_gray;
  border-bottom: 1px solid $color_gray;
  justify-content: space-between;
  margin: 0 -15px 4 * $gutter;
}
.tabs__item {
  border-bottom: 2px solid transparent;
  font-size: 14px;
  text-align: center;
  flex-grow: 1;
  padding: 14px 10px;
  transition: all 0.2s ease-in-out;
  position: relative;
  cursor: pointer;

  &:hover {
    cursor: pointer;
    color: $color_primary;
  }

  &::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: $color_primary;
    transition: all 0.2s ease-in-out;
  }

  &.active {
    font-weight: bold;
    color: $color_primary;
    &::before {
      width: 100%;
    }
  }
}

.tabs__content {
  animation: slideInLeft 0.2s ease-in-out;
  position: relative;
  color: $color_title;

  .tab__content-padd {
    padding: 0 15px;
  }
}

@keyframes slideInLeft {
  0% {
    transform: translateX(-30px);
  }
  100% {
    transform: translateX(0);
  }
}
</style>
