<template>
  <modal
    name="show-promotions-applied-in-product"
    :scrollable="true"
    height="auto"
    :header-bg-variant="null"
    @closed="$emit('closed')"
    v-if="product"
  >
    <b-row class="d-flex justify-content-between mb-2 mt-1">
      <b-col class="d-flex modal-text-color ml-2" cols="8">
        <div class="d-flex align-self-center justify-content-center rounded-div mr-2 mt-1">
          <font-awesome-icon icon="bullhorn" class="align-self-center" />
        </div>
        <div class="pt-1">
          <div class="inline-block akkurat-regular min-header-text">Promoções Aplicadas</div>
          <div class="akkurat-bold max-header-text title">{{title}}</div>
        </div>
      </b-col>
      <b-col class="d-flex justify-content-end mr-2 mt-1">
        <span class="close-icon" @click="closeModal">
          <font-awesome-icon icon="times" class="align-self-center" />
        </span>
      </b-col>
    </b-row>

<div class="modal-body">

    <b-row>
      <b-col md='12'>
<h3>Tabela de Preços:</h3>
</b-col>
      <b-col md="12">
        <table class="table">
          <thead>
            <th>Produto</th>
            <th class="text-center">Unid.(s)</th>
            <th>Val. Unit.</th>
            <th>Total</th>
          </thead>
          <tbody>
            <tr v-for="row in getTablePrices" >
              <td>{{product.product_per_campaign.product.name}}</td>
              <td class="text-center">{{row.quantity}}</td>
              <td class="no-wrap">
                <span v-if="row.unit_price > 0">R$ {{row.unit_price | formatCoin}}</span>

                <span v-else class="text-success">GRÁTIS</span>
              </td>
               <td class="no-wrap">R$ {{row.total | formatCoin}}</td>
            </tr>
           
          </tbody>
        </table>
      </b-col>
    </b-row>
   

    <b-row>

<b-col md='12'>
<h3>Promoções Aplicadas:</h3>
</b-col>
      <b-col md="12" class="promotion-list">
        <div v-for="promotion in promotions" :key="promotion.id">
          <strong>{{promotion.name}}:</strong>

          <p
            class="details"
          >Compre {{ toStringProductsPromotion(promotion.promotion_has_buy_product_per_campaign,promotion.buy_type)}}</p>

          <p
            class="details"
          >Leve: {{ toStringProductsPromotion(promotion.promotion_has_take_product_per_campaign, promotion.take_type, promotion.discount_type)}}</p>
        </div>
      </b-col>
      <b-col md="12" class="promotion-progressive-list">
        <p
          v-if="promotionsProgressiveToShow"
        >{{toStringProductsPromotionProgressive(promotionsProgressiveToShow)}}</p>
      </b-col>
    </b-row>
  
  </div>

    <p class="text-center">
      <button class="btn btn-primary" @click="closeModal">Fechar</button>
    </p>
  </modal>
</template>

<script>

export default {
  name: "show-promotions-applied-in-product",
  props: {
    title: {
      type: String,
      default: () => {
        return "";
      }
    },
    product: {
      default: () => {
        return null;
      }
    },
    promotionsToShow: {
      type: Array,
      default: () => {
        return [];
      }
    },
    promotionsProgressiveToShow: {
      type: Object,
      default: () => {
        null;
      }
    }
  },
  data: () => {
    return {
      //pricesTable: []
    };
  },
  computed: {
    promotions() {
      if (this.product == null) {
        return [];
      }

      var promotions = this.product.promotions;

      return this.$store.state.orderCreate.promotions.filter(
        promotion =>
          typeof promotions.find(promotionApplied => {
            return promotionApplied.promotionId == promotion.id;
          }) === "object"
      );
    },

  getTablePrices(){
    var vm = this;
    return this.$store.getters.getOrdeWithCatalogPrice().filter( row => row.product_per_campaign_id == vm.product.product_per_campaign.id);
  },
  },

  methods: {
    closeModal() {
      this.$modal.hide("show-promotions-applied-in-product");
      this.$emit("modalClosed");
    },
    toStringProductsPromotion(products, stringToJoin, discount_type) {
      var productsNames = [];
      let strToJoin = stringToJoin === "AND" ? " E " : " OU ";
      products.forEach(product => {
        if (typeof product.quantity === "undefined") {
          let name = product.product_per_campaign.product.name;
          let discountText =
            discount_type === "PERCENT"
              ? product.discount + "%"
              : "R$ " +
                this.$options.filters.formatCoin(parseFloat(product.discount));
          let textWithDiscount = name + " com " + discountText + " de desconto";

          productsNames.push(textWithDiscount);
        } else {
          productsNames.push(
            product.quantity + " " + product.product_per_campaign.product.name
          );
        }
      });

      return productsNames.join(strToJoin);
    },
    toStringProductsPromotionProgressive(promotion) {
      if (promotion === null) {
        return "";
      }

      if (promotion.discount_type === "PERCENT") {
        return (
          "Compre produtos " +
          promotion.quantity +
          " " +
          this.title +
          " ou mais e ganhe na unidade." +
          promotion.discount +
          "% de desconto"
        );
      } else {
        return (
          "Compre produtos " +
          promotion.quantity +
          " " +
          this.title +
          " ou mais e ganhe R$ " +
          this.$options.filters.formatCoin(parseFloat(promotion.discount)) +
          " de desconto na unidade."
        );
      }
    },
    toStringPrices(promotionByOrder) {
      var promotion = this.promotions.find(
        promotionItem => promotionItem.id === promotionByOrder.promotionId
      );
    },
  },

};
</script>


<style scoped lang="scss">
@import "@/assets/css/main.scss";

.title {
  font-size: 0.7em !important;
}
.no-wrap {
      white-space: nowrap;
}
.promotion-list {
  div {
    padding: 5px 5px;
    border-bottom: #3e3e3e;

    .details {
      margin: 0;
      padding: 5px 0px;
      padding-left: 25px;
    }
  }

  p:last-child {
    border: none;
  }
}

.promotion-progressive-list {
  p {
    padding: 10px 10px;
  }
}

.custom-body {
  margin: 10px;
}

.modal-text-color {
  color: #3e3e3e;
}

.min-header-text {
  letter-spacing: 0.2px;
  font-size: 9px;
}

.max-header-text {
  letter-spacing: 0.4px;
  font-size: 16px;
}

.close-icon {
  color: #979797;
  font-size: 20px;
}

.btn {
  margin: 10px;
  border-radius: 20px;
  width: 100%;
  max-width: 192px;
  height: 35px;
}

.btn-default {
  background: #ff9b64;
}

.rounded-div {
  background: #cb2d2d80 0% 0% no-repeat padding-box;
  svg {
    color: #cb2d2d;
  }
}

.close-icon {
  cursor: pointer;
}
</style>
