<template>

  <div class="o-modal" :class="{'is-active': active}">
    <div class="o-modal__shader" @click="$emit('close')"></div>
    <div class="o-modal__content  js-modal-scroller">
      <div class="o-modal__header" ref="modalHeader">
        <h2 class="o-modal__heading" style="">{{ product.translation.name }}</h2>
        <button class="o-modal__close" @click="$emit('close')"></button>
      </div>

      <table class="o-modal__table">
        <thead class="o-modal__thead" v-if="product.levels.length > 0" ref="modalThead">
          <tr>
            <th class="o-modal__thead-cell"></th>

            <th class="o-modal__thead-cell" v-for="level in product.levels">
              <div class="c-package-price">

                <h3 class="c-package-price__title">{{ level[0] }}</h3>

                <div class="c-package-price__amount  c-package-price__symbol" v-bind:data-currency-symbol="getCurrencyIcon()">
                  <div class="c-package-price__number">{{ getPrice(level[1],level[2]) }}</div>
                </div>
                <div class="c-package-price__info">
                  <p>
                    <span>{{trans('per')}}</span>
                    <span class="c-tooltip  c-tooltip--text c-tooltip--dark-pop-up" v-bind:data-tooltip="trans('power_user_tooltip')">{{trans('power_user')}}</span>
                    <span>/</span>
                    <span>{{trans('month')}}</span>
                  </p>
<!--                  <p>-->
<!--                    <span>+</span>-->
<!--                    <span class="c-package-price__base  js-pricing-price  js-pricing-symbol" data-currency-symbol="€" data-price-eur="39" data-price-usd="39">39</span>-->
<!--                    <span>base price</span>-->
<!--                  </p>-->
                </div>

              </div>
            </th>
          </tr>
        </thead>

        <tbody class="o-modal__tbody" v-if="features">
        <tr v-for="rIndex in features[0].length" :key="rIndex">

            <td v-if="features[2][rIndex - 1] == 1" v-bind:colspan="features.length">
              <div class="o-modal__table-subheader">
                <span>{{ features[0][rIndex - 1] }}</span>
              </div>
            </td>

            <template v-else>

              <td class="o-modal__tbody-cell">
                <div class="o-modal__label-column">
                  {{ features[0][rIndex - 1] }}
                  <span v-if="features[1][rIndex - 1] != '' && rIndex != 2" :data-tooltip="features[1][rIndex - 1]"
                        class="c-tooltip  c-tooltip--dark-pop-up c-tooltip--modal"></span>
                  <span v-if="features[1][rIndex - 1] != '' && rIndex == 2" :data-tooltip="features[1][rIndex - 1]"
                        class="c-tooltip  c-tooltip--dark-pop-up c-tooltip--modal c-tooltip--modal--bottom"></span>
                </div>
              </td>

              <td class="o-modal__tbody-cell" v-for="cIndex in features.length - 3" :key="cIndex">
                <div class="o-modal__feature-icon" :class="{ 'is-excluded': features[cIndex + 2][rIndex - 1] == 0 }"></div>
              </td>

            </template>

          </tr>
        </tbody>

      </table>
    </div>
  </div>

</template>

<script>
export default {
  name: "productPopUp",
  props: {
    active: {
      type: Boolean,
      required: true
    },
    product: {
      type: Object,
      required: true,
    }
  },

  mounted() {
    // stacked sticky elements, 2nd element has top offset of 1st element's height
    const { modalHeader, modalThead } = this.$refs;
    if (modalThead) { modalThead.style.top = `${modalHeader.clientHeight}px` }
  },

  computed: {

    features() {

      if(this.product.translation.features == '') return null
      const features = JSON.parse(this.product.translation.features)

      if(!features) return null

      const columns = []

      features.forEach((row) => {
        row.forEach((column, index) => {
          if(columns[index] === undefined) columns[index] = []
          columns[index].push(column)
        })
      });

      if(this.product.levels.length <= 1) columns.splice(-2,2)
      else if(this.product.levels.length === 2) columns.splice(-1, 1)

      return columns;
    }
  }
}
</script>