<template>
  <div>
    <modal
      name="alert-stock-limit"
      :scrollable="true"
      height="auto"
      :header-bg-variant="null"
      @closed="$emit('closed')"
    >
      <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="exclamation-triangle" class="align-self-center" />
          </div>
          <div class="pt-1">
            <div class="inline-block akkurat-regular min-header-text">Alerta do Sistema</div>
            <div class="akkurat-bold max-header-text title">Produto sem estoque</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="custom-body">
        <div class="alert-msg">
          <b-row>
            <b-col md="12">
              <p class="text-center akkurat-bold">
                Devido ao grande volume de vendas, não há mais o
                produto em estoque!
              </p>
              <p class="text-center akkurat-bold">Aproveite e leve:</p>

              <p v-if="suggestedProduct!= null" class="text-center akkurat-bold">
                Produto sugerido:
                ({{suggestedProduct.product.code}}) {{suggestedProduct.product.name}}
                <img
                  :src="suggestedProduct.product.image_url"
                />
              </p>
              <b-row class="add-to-cart">
                <b-col md="4" offset-md="2" class="text-center container-quantity">
                  <label for>Quantidade</label>
                  <input-qty :small="true" v-model="quantity" />
                </b-col>

                <b-col md="6" class="text-left container-btn-add-to-order">
                 <p> &nbsp; </p>
                  <b-button class="btn btn-success radius-theme" @click="addToOrder">
                    <font-awesome-icon class="icon" icon="shopping-basket" />Adicionar ao pedido
                  </b-button>
                </b-col>
              </b-row>
            </b-col>
          </b-row>
        </div>
        <b-row class="buttons">
          <b-col md="5" class="text-right"></b-col>

          <b-col md="4" class="text-right"></b-col>

          <b-col md="3" class="text-center">
            <b-button class="btn btn-go-to-back radius-theme btn-primary" @click="closeModal">Fechar</b-button>
          </b-col>
        </b-row>
      </div>
    </modal>
  </div>
</template>

<script>
import inputQty from "@/components/shared-components/inputs/inputQuantity";
export default {
  name: "alert-stock-limit",
  components: {
    inputQty
  },
  data: () => {
    return {
      suggestedProduct: null,
      quantity: 1
    };
  },
  computed: {
    products() {
      return this.$store.getters.getOrder();
    }
  },
  watch: {
    products: {
      handler: function(products) {
        for (let i = 0; i < products.length; i++) {
          if (products[i].product_per_campaign.stock_limit < 0) {
            continue;
          }

          if (
            products[i].quantity > products[i].product_per_campaign.stock_limit
          ) {
            if (products[i].product_per_campaign.suggested_product != null) {
              this.suggestedProduct =
                products[i].product_per_campaign.suggested_product;
              this.$modal.show("alert-stock-limit");
            } else {
              this.$fire({
                title: "Limite excedido.",
                text:
                  "Quantidade máxima em estoque do produto " +
                  products[i].product_per_campaign.product.name +
                  " é : " +
                  products[i].product_per_campaign.stock_limit
              });
            }
            if (products[i].product_per_campaign.stock_limit === 0) {
              this.$store.dispatch("removeProduct", i);
            } else {
              this.$store.dispatch("updateProductQuantity", {
                product_per_campaign: products[i].product_per_campaign,
                quantity: products[i].product_per_campaign.stock_limit
              });
            }

            break;
          }
        }
      },
      deep: true
    }
  },
  methods: {
    addToOrder() {
      this.$store.dispatch("updateOrder", {
        product_per_campaign: this.suggestedProduct,
        quantity: this.quantity
      });

  this.closeModal();

    },
    closeModal() {
      this.$modal.hide("alert-stock-limit");
      this.$emit("closed");
    }
  }
};
</script>

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

.alert-msg {
  margin-top: 20px;
  padding: 0 40px;
}
.buttons {
  .btn-request-change-credit-limit {
    min-width: 100%;
    color: #fff !important;
  }

  .btn-go-to-back {
    margin-left: 0px;
  }
}
.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>
