<template> 
<div>
      <v-row v-if="searchResults.page.length && !inProgress" class="mx-4"> 
        <v-col cols="12" lg="12" md="12" sm="12"  >
          <v-row v-if="inProgress">
            <v-col
              v-for="(i, index) in 9"
              v-bind:key="index"
              lg="4"
              md="4"
              sm="4"
              cols="12"
              class=" cursor-pointer"
            >
              <v-skeleton-loader type="card"></v-skeleton-loader>
            </v-col>
          </v-row>
          <v-row v-if="searchResults.page.length > 0">
            <v-col
              v-for="(product, index) in searchResults.page"
              v-bind:key="index"
              lg="4"
              md="4"
              sm="4"
              cols="12"
              class=" cursor-pointer "
             
            >
              <v-img
                :src="imageBasePathUrl + product.i + imageBaseParams"
                width="100%"
                :alt="product.n"
                :title="product.n"
              ></v-img>
              <v-row>
                <v-col cols="6"  >
                  <h1
                    class="float-left fontsize-14 body ls-n009 fontcolor-black-darken font-weight-300 word-break"
                  >{{ product.n }}</h1>
                </v-col>
                <v-col cols="5" >
                  <p
                    v-if="product.lp"
                    class="float-right fontsize-14 body ls-n009 fontcolor-black-darken font-weight-300"
                  >
                    From ${{ product.lp }}
                    {{ product.u }}
                  </p>
                  <div
                    v-else
                    class="float-right fontsize-14 body ls-n009 fontcolor-black-darken font-weight-300"
                  >
                    <div v-if="product.sp">
                      <s>${{ product.p }}</s> &nbsp;
                      <p class="red--text mb-0">${{ roundUp(product.sp) }}</p>  / {{ product.u }}
                    </div>
                    <div v-else-if="product.p != 0">
                      <p>
                        ${{ product.p }} /  {{ product.u }}
                      </p>
                    </div>
                    <div v-else>
                      <p>TBD</p>
                    </div>
                  </div>
                </v-col>
                <v-col cols="12" class="float-right" >
                <v-hover v-slot:default="{ hover }">
              <v-btn
                :disabled="inProgress"
                block
                x-large
                :outlined="!inProgress ? hover:false"
                :color="hover?'white':'primary'"
                :class="hover?'primary--text':'white--text'"
                class="text-uppercase ls-0 body productpage-button"
                tile
                depressed
                @click="addToCart(product.sku,product.mq)"
              >
                <v-progress-circular
                  align="center"
                  :size="40"
                  block
                  color="primary"
                  indeterminate
                  v-if="inProgress"
                ></v-progress-circular>
               <span v-if="!inProgress">ADD TO CART</span>
              </v-btn>
            </v-hover>
                </v-col>
              </v-row> 
            </v-col>
          </v-row>
        </v-col>
      </v-row>
       <v-row v-else class="text-center">
           <v-col
            lg="12"
              md="12"
              sm="12"
              cols="12" v-if="inProgress">
              <v-progress-circular :size="20" color="primary" indeterminate ></v-progress-circular>
            </v-col>
            <v-col
            lg="12"
              md="12"
              sm="12"
              cols="12" v-else>
             
              <v-alert small class="ma-0 pa-0" type="error" text >{{
                noProducts
              }}</v-alert>
            </v-col>
          </v-row> 
 
    </div>
</template>
<script>
/* eslint-disable no-alert, no-console ,  no-debugger */
//import * as easings from "vuetify/es5/services/goto/easing-patterns";
import { mapState } from "vuex";
 
export default {
  name: "RetailerSearchProducts",
  components: {
  },
  props: [
    "criteria",
    "searchPageContent",
    "breadcrumbData",
    "categoryPageContent"
  ],
  computed: {
    ...mapState({
      searchResults: state => state.catalogBrowser.searchResults,  
      inProgress: state => state.catalogBrowser.inProgress,
    }),
   
    imageBasePathUrl() {
      return process.env.VUE_APP_IMAGE_PATH_URL;
    },
    imageBaseParams() {
      return process.env.VUE_APP_IMAGE_CATEGORY_PARAMS;
    },
    isIpadOrMobile: function() {
      return this.$vuetify.breakpoint.mdAndDown ? true : false;
    },
    isIpad: function() {
      return this.$vuetify.breakpoint.smOnly || this.$vuetify.breakpoint.mdOnly
        ? true
        : false;
    },
    isMobile: function() {
      return this.$vuetify.breakpoint.xs ? true : false;
    },
     userAuth: function() {
      return this.$store.state.auth.userAuth;
    },
  },
  watch: {
  },
  data: () => ({  
    menu: false, 
    showDrawarFilter: false,
    noProducts: "No products found.",
     snackbar: {
      show: false,
      message: null,
      color: null,
      timeout: 0
    },
  }),
  methods: {
     roundUp(num) {
      var with2Decimals = num.toString().match(/^-?\d+(?:\.\d{0,2})?/)[0];
      return with2Decimals;
    },
   async  addToCart(sku,qty) {
      if (sku) {
        debugger
        if (this.userAuth) {
         await this.$store
            .dispatch("userCartProduct/addToCart", {
              sku: sku,
              qty:qty,
              ccid: null,
              price: null,
              personalizeDetails: null
            })
            .then(() => { 
               this.snackbar = {
                message: "Product Added Successfully",
                color: "success",
                show: true,
                timeout: 2000
              };
              debugger
              this.$store.dispatch("userCartProduct/cartProductList");
              this.$emit("actionClose", this.snackbar);
             
            })
            .catch(() => {
              this.snackbar = {
                message: 'Unexpected error while communicating with the cloud',
                color: "error",
                show: true,
                timeout: 2000
              };
                 this.$emit("actionClose", this.snackbar);
            });
        }
        
      } else {
        this.errorMessage = "Please Select Quantity";
      }
    },
    OnResize() {
      setTimeout(() => {
        if (this.$vuetify.breakpoint.lgAndUp) {
          this.showDrawarFilter = false;
        }
      }, 200);
    },
  },

  created() {
  }
};
</script>
<style lang="scss" >
.sort-button.theme--light.v-text-field--solo
  > .v-input__control
  > .v-input__slot {
  background: transparent !important;
}
.categorybaseproducts-pagination-button .v-pagination__item--active {
  outline: #ffffff !important;
}
.categorybaseproducts-pagination-button .v-pagination__item {
  outline: #ffffff !important;
  box-shadow: none !important;
  padding: 0px !important;
  margin: 0px !important;
}
.categorybaseproducts-pagination-button {
  justify-content: flex-start;
}
.categorybaseproducts-overflow-button .v-select__slot {
  border-left: 1px solid #dcdddd !important;
  border-right: 1px solid #dcdddd !important;
  max-width: 85px !important;
  max-height: 36px !important;
}
.categorybaseproducts-overflow-button {
  max-width: 85px !important;
}
.categorybaseproducts-overflow-button .v-select__slot .v-input__append-inner {
  max-height: 36px !important;
}
.categorybaseproducts-overflow-button .v-overflow-btn .v-select__slot {
  max-height: 36px !important;
}
.categorybaseproducts-overflow-button .v-text-field__details {
  display: none;
}
.categorybaseproducts-pagination-button
  .v-pagination__navigation.v-pagination__navigation--disabled {
  display: none;
}
.categorybaseproducts-pagination-button
  .v-pagination__navigation
  .v-icon.v-icon {
  font-style: normal !important;
  color: #1d1d1d !important;
  text-transform: uppercase !important;
  font-size: 14px;
  font-family: "Whyte-Regular", sans-serif;
  letter-spacing: -0.1px;
}
.categorybaseproducts-select-button .v-input__control .v-input__slot {
  border: thin solid #8b8b8b !important;
}
.categorybaseproducts-select-button:hover .v-input__control .v-input__slot {
  border: thin solid #2850da !important;
}
.categorybaseproducts-select-button.v-input--is-label-active.v-input--is-focused
  .v-input__control
  .v-input__slot {
  border: thin solid #2850da !important;
}
.categorybaseproducts-select-button:hover
  .v-select__selection.v-select__selection--comma {
  color: #2850da !important;
}
.categorybaseproducts-select-button:hover
  .v-input__append-inner
  .v-input__icon
  .v-icon {
  color: #2850da !important;
}
.categorybaseproducts-pagination-button .v-pagination__navigation {
  outline: #ffffff !important;
  box-shadow: none !important;
  padding: 0px !important;
  //margin: 0px 10px !important;
}
.custom-pagination li:nth-child(1) {
  margin-right: 15px !important;
  margin-left: 15px;
}
.categorybaseproducts-select-button.v-input--is-label-active.v-input--is-focused
  .v-select__selection.v-select__selection--comma {
  color: #2850da !important;
}
.categorybaseproducts-sortby-button.theme--light.v-select
  .v-select__selection--comma {
  color: #2850da !important;
}
.categorybaseproducts-sortby-button .v-text-field__details {
  display: none;
}
.categorybaseproducts-sortby-button .v-input__control .v-input__slot {
  border: thin solid #2850da !important;
}
.categorybaseproducts-sortby-button:hover .v-input__control .v-input__slot {
  border: thin solid #2850da !important;
}
.categorybaseproducts-sortby-button.v-input--is-label-active.v-input--is-focused
  .v-input__control
  .v-input__slot {
  border: thin solid #2850da !important;
}
.categorybaseproducts-sortby-button:hover
  .v-select__selection.v-select__selection--comma {
  color: #2850da !important;
}
.categorybaseproducts-sortby-button:hover
  .v-input__append-inner
  .v-input__icon
  .v-icon {
  color: #2850da !important;
}
.categorybaseproducts-sortby-button
  .v-input__append-inner
  .v-input__icon
  .v-icon {
  color: #2850da !important;
}
.categorybaseproducts-sortby-button.v-input--is-label-active.v-input--is-focused
  .v-select__selection.v-select__selection--comma {
  color: #2850da !important;
}
.categorybaseproducts-sortby-button.v-input--is-label-active.v-input--is-focused.v-text-field.v-text-field--solo
  .v-input__append-inner,
.v-text-field.v-text-field--solo .v-input__prepend-inner {
  -ms-flex-item-align: center;
  align-self: center;
  padding-top: 5px;
  border-left: 1px solid #2850da;
  padding-left: 10px;
  height: 34px;
}
.categorybaseproducts-select-button.v-input--is-label-active.v-input--is-focused.v-text-field.v-text-field--solo
  .v-input__append-inner,
.v-text-field.v-text-field--solo .v-input__prepend-inner {
  -ms-flex-item-align: center;
  align-self: center;
  padding-top: 5px;
  border-left: 1px solid #2850da;
  padding-left: 10px;
  height: 34px;
}
.searchproducts-cancel-buttons.v-icon.v-icon::after {
  opacity: 0 !important;
}
.categorybaseproducts-sortby-button .v-text-field__details {
  display: none;
}
.categorybaseproducts-overflow-button .v-text-field__details {
  display: none;
}
.categorybaseproducts-filter-button .v-text-field__details {
  display: none;
}
.filter-component-width .v-expansion-panels {
  display: inline-block;
}
// .v-text-field__details {
//   display: none;
// }
</style>
<style src="./RetailerSearchProducts.scss" lang="scss" scoped />