<template>
  <div v-if="pageName() !== 'HomePage' && pageName() !== 'CategoryPage' && pageName() !== 'Accessibility' && !checkStaticPage()">
    <v-card
      class="d-none d-sm-flex flex-column flex-start hero-container-image-card hero-container-image"
      min-height="650"
      :img="heroData.image"
      tile
      flat
      @click="goToPage('holiday','holiday-cards','holiday-greeting-cards',412)"
    >
      <div class="mx-auto align-self-center mt-auto mb-auto">
        <v-card flat color="rgba(0,0,0,0.0)" class="text-center">
          <v-card-text class="whyteTmin10-font text-uppercase pa-0 white--text h1 ls-n10">{{heroData.title}}</v-card-text>
          <v-card-text
            class="white--text text-center fontsize-16 pa-0 mt-md-2 mt-lg-2 body-font px-10 mx-auto herocontainer-max-width-635 ls-n10"
            v-html="heroData.content"
          ></v-card-text>
          
          <v-hover v-slot:default="{ hover }" v-if="heroData.buttonText">
            <v-btn
              large
              :color="hover ? 'primary' : 'herocontainer-light-white'"
              :class="hover?'white--text':'fontcolor-404040'"
              class="mt-12 body hero-button ls-n10"
              tile
              depressed
              @click.native="goToPage('holiday','holiday-cards','holiday-greeting-cards',412)"
            >{{heroData.buttonText}}</v-btn>
          </v-hover>
         
        </v-card>
      </div>
    </v-card>
    <v-card flat class="d-sm-none mx-auto text-center pb-12 hero-container-image-card" @click="goToPage('holiday','holiday-cards','holiday-greeting-cards',412)" tile>
      <v-img :position="pageName() === 'StoreLocatore'?'right':'inherit'" class="white--text text-uppercase align-start hero-container-mobile-image" height="380" :src="heroData.mobileViewImage">
        <slot />
      </v-img>
      <v-card-text class="mt-7 pt-0 pa-6">
        <v-card-text class="text-uppercase text-center px-12 pa-0 h1 ls-n10">{{heroData.title}}</v-card-text>
        <v-card-text class="pa-0 mt-3 px-5 fontsize-16 body-font ls-n10" v-html="heroData.content"></v-card-text>
        <v-card-text class="text-center pa-0 mt-6">
          <v-hover v-slot:default="{ hover }" v-if="heroData.buttonText">
            <router-link
              :class="hover ? 'contentColor--text' : 'primary--text'"
              to
              @click.native="goToPage('holiday','holiday-cards','holiday-greeting-cards',412)"
              class="ls-n009 text-decoration-none body-font text-uppercase fontsize-16 d-flex flex-row align-center justify-center"
            >
              {{heroData.buttonText}}
              <!--<v-icon
                :class="hover ? 'contentColor--text' : 'primary--text'"
                class="ml-1"
              >mdi-arrow-right</v-icon>-->
               <div class="homepage-route-icon ml-3 pl-12" :class="hover?'home-right-hover-icon': 'home-right-icon'" ></div> 
            </router-link>
          </v-hover>
        </v-card-text>
      </v-card-text>
    </v-card>
  </div>
  <div v-else-if="checkStaticPage() &&  pageBackgroundColor() && pageName() !== 'Accessibility'">
    <v-row align="center" :class="rightBackgroundColor">
      <v-col cols="12" sm="6" md="6" :class="rightBackgroundColor" >
        <v-container>
          <v-row
            align="center"
            class="my-12 py-12 px-6 herocontainer-min-height-650 justify-center flex-column ma-6 ma-md-12 pa-md-12"
            no-gutters
          >
            <v-col cols="12" v-show="heroData.header">
              <h1
                class="text-center d-none d-sm-block fontsize-28 text-uppercase body-font ls-n028 line-height-36 font-weight-regular"
                :class="heroData.headerDescription ? 'pb-10': ''"
              >{{heroData.header}}</h1>
              <h1
                class="text-center d-sm-none fontsize-28 text-uppercase body-font ls-n028 line-height-36 font-weight-regular"
                :class="heroData.headerDescription ? 'pb-10': ''"
              >{{heroData.header}}</h1>
            </v-col>
            <v-col cols="12" v-show="heroData.headerDescription">
              <div
                class="text-center fontsize-16 px-lg-12 body-font ls-n016 line-height-18pt"
                v-html="heroData.headerDescription"
              ></div>
            </v-col>
          </v-row>
        </v-container>
      </v-col>
      <v-col cols="12" sm="6" md="6" :class="leftBackgroundColor">
        <v-container class="">
          <v-row
            align="center"
            class="ma-6 my-12 py-12 ma-md-12 pa-md-12 px-6 herocontainer-min-height-650 justify-center flex-column"
            no-gutters
          >
            <v-col cols="12" v-show="heroData.contentHeader">
              <h1
                class="fontsize-28 pb-10 px-lg-12 d-none d-sm-block text-uppercase body-font line-height-36 ls-n028 font-weight-regular"
              >{{heroData.contentHeader}}</h1>
              <h1
                class="fontsize-28 pb-7 ls-n028 line-height-36 px-lg-12 d-block d-sm-none text-uppercase body-font ls-n01 font-weight-regular"
              >{{heroData.contentHeader}}</h1>
            </v-col>
            <v-col cols="12" v-show="heroData.contentDescription">
              <div
                class="px-lg-12 ls-n016 fontsize-16 line-height-18pt body-font"
                v-html="heroData.contentDescription"
              ></div>
            </v-col>
          </v-row>
        </v-container>
      </v-col>
    </v-row>
  </div>
  <!--<div v-else-if="pageName() !== 'Accessibility'">
    <v-col class="primary">
      <v-row align="center" class="py-12 my-12 px-sm-12 px-md-12 mx-md-12">
        <v-col cols="12" sm="6" md="6" class="pr-md-12 px-lg-12">
          <v-container class="px-lg-12">
            <h1
              class="text-uppercase font-weight-regular line-height-54 d-none d-sm-block pl-md-6 pr-md-12 white--text regular-font py-12 my-12 py-sm-12 my-sm-12 py-md-12 my-md-12 body-font ls-n028"
            >{{heroData.header}}</h1>
            <h2
              class="text-uppercase font-weight-regular d-flex d-sm-none text-center line-height-36 pl-md-6 pr-md-12 white--text regular-font py-12 my-12 py-sm-12 my-sm-12 py-md-12 my-md-12 body-font ls-n028"
            >{{heroData.header}}</h2>
          </v-container>
        </v-col>
        <v-col cols="12" sm="6" md="6" class="px-lg-12">
          <v-container class="px-md-12">
            <h1
              class="fontsize-28 font-weight-regular line-height-36 pb-5 text-uppercase white--text body-font d-none d-sm-block ls-n028"
            >{{heroData.firstContentHeader}}</h1>

            <p
              class="white--text ls-n03 fontsize-16pt line-height-18pt body-font d-none d-sm-block"
            >{{heroData.firstContentDescriptionFirst}}</p>
            <p
              class="white--text ls-n03 fontsize-16pt line-height-18pt body-font d-none d-sm-block"
            >{{heroData.firstContentDescriptionSecond}}</p>
            <h1
              class="fontsize-28 font-weight-regular line-height-36 pb-5 pt-12 mt-3 text-uppercase white--text body-font pt-10 d-none d-sm-block ls-n028"
            >{{heroData.secondContentHeader}}</h1>

            <p
              class="white--text ls-n03 fontsize-16pt line-height-18pt body-font d-none d-sm-block"
            >{{heroData.secondContentDescriptionFirst}}</p>
            <p
              class="white--text ls-n03 fontsize-16pt line-height-18pt body-font d-none d-sm-block"
            >{{heroData.secondContentDescriptionSecond}}</p>
          </v-container>
        </v-col>
      </v-row>
    </v-col>
  </div>-->
  <!--<div v-else-if="pageName() == 'FaqPage'">
    <v-col class="primary">
      <v-container v-show="heroBlock.content" class="text-center black--text regular-font pt-sm-12 pt-md-12 mt-sm-7 mt-md-2 pb-6 px-0 pb-md-0 px-md-12 px-sm-12">
      <v-col class="px-md-5 px-0">
        <div v-html=" getBlockContent()"></div>
      </v-col>
    </v-container>
    </v-col>
  </div>-->
  <div v-else>
    <div>
     <!-- <v-card
        v-if="heroContent.customAttributes && getImageCustomAttributeValue(heroContent.customAttributes,'image') != undefined"
        class="d-none d-sm-flex flex-column flex-start"
        tile
        flat
        min-height="650"
      >
        <v-img
          :src="getImageCustomAttributeValue(heroContent.customAttributes,'image')"
          class="hero-container-image"
          :alt="heroContent.name" :title="heroContent.name"
        >
          <div class="mx-auto align-self-center mt-auto mb-auto">
            <v-card flat color="rgba(0,0,0,0.0)" class="text-center">
              <h1
                class="v-card__text text-uppercase pa-0 white--text h1 ls-n10 text-center mx-auto herocontainer-max-width-800"
              >{{heroContent.name}}</h1>
              <v-card-text
                class="white--text fontsize-16pt line-height-18 text-center pa-0 mt-md-2 mt-lg-2 body-font px-10 mx-auto herocontainer-max-width-635 ls-n10"
                v-html="getCustomAttributeValue(heroContent.customAttributes,'description')"
              ></v-card-text>
              <v-hover v-slot:default="{ hover }" v-if="heroData.buttonText">
            <v-btn
              large
              :color="hover ? 'primary' : 'herocontainer-light-white'"
              class="mt-6 body hero-button ls-n10"
              tile
              depressed
              @click.native="routeToPage('CategoryPage')"
            >{{heroData.buttonText}}</v-btn>
              </v-hover>
            </v-card>
          </div>
        </v-img>
      </v-card>-->
       <!--<v-card
        v-else-if="heroContent.customAttributes"
        class="d-none d-sm-flex flex-column flex-start"
        min-height="650"
        tile
        flat
      >
        <v-img :src="heroData.image" :alt="heroContent.name" :title="heroContent.name" class="hero-container-image">
          <div class="mx-auto align-self-center mt-auto mb-auto">
            <v-card flat color="rgba(0,0,0,0.0)" class="text-center">
              <h1
                class="v-card__text text-uppercase pa-0 mx-auto white--text h1 ls-n10 herocontainer-max-width-800"
              >{{heroContent.name}}</h1>
            </v-card>
          </div>
        </v-img>
      </v-card>-->
       <!--<v-card v-else class="d-none d-sm-flex flex-column flex-start" min-height="650" tile flat>
        <v-img :src="heroData.image" :alt="heroContent.name" :title="heroContent.name" class="hero-container-image">
          <div class="mx-auto align-self-center mt-auto mb-auto">
            <v-card flat color="rgba(0,0,0,0.0)" class="text-center">
              <v-card-text
                class="text-uppercase pa-0 mx-auto white--text h1 ls-n10 herocontainer-max-width-800"
              >{{heroData.title}}</v-card-text>
                <v-card-text
            class="white--text text-center pa-0 mt-md-2 mt-lg-2 body-font px-10 mx-auto herocontainer-max-width-635 ls-n10"
            v-html="heroData.content"
          ></v-card-text>
            </v-card>
          </div>
        </v-img>
      </v-card>-->

      <!-------------------------------------Mobile view----------------------------------------->
      <!--<v-card
        v-if="heroContent.customAttributes && getImageCustomAttributeValue(heroContent.customAttributes,'image') != undefined"
        flat
        class="d-sm-none mx-auto text-center pb-12"
        tile
      >
        <v-img
          class="white--text text-uppercase align-start"
          height="350"
          :src="getImageCustomAttributeValue(heroContent.customAttributes,'image')"
          :alt="heroContent.name" :title="heroContent.name"
        >
          <slot />
        </v-img>
        <v-card-text class="mt-7 pt-0 pa-6">
          <h1 class="v-card__text text-uppercase text-center pa-0 h1 ls-n10">{{heroContent.name}}</h1>
          <v-card-text
            class="pa-0 mt-3 px-5 body-font ls-n10 fontsize-16pt line-height-18"
            v-html="getCustomAttributeValue(heroContent.customAttributes,'description')"
          ></v-card-text>
          <v-card-text class="text-center pa-0 mt-6"></v-card-text>
        </v-card-text>
      </v-card>-->

      <!--<v-card
        v-else-if="heroContent.customAttributes"
        flat
        class="d-sm-none mx-auto text-center pb-12"
        tile
      >
        <v-img class="white--text text-uppercase align-start" height="250" :src="heroData.image" :alt="heroContent.name" :title="heroContent.name">
          <slot />
        </v-img>
        <v-card-text class="mt-7 pt-0 pa-6">
          <h1 class="v-card__text text-uppercase text-center pa-0 h1 ls-n10">{{heroContent.name}}</h1>
        </v-card-text>
      </v-card>-->
      <!--<v-card v-else class="d-sm-none flex-column flex-start" min-height="650" tile flat>
        <v-img :src="heroData.image" :alt="heroContent.name" :title="heroContent.name" class="hero-container-image">
           <div class="mx-auto align-self-center mt-auto mb-auto">
            <v-card flat color="rgba(0,0,0,0.0)" class="text-center">
              <v-card-text
                class="text-uppercase pa-0 mx-auto white--text h1 ls-n10 herocontainer-max-width-800"
              >{{heroData.title}}</v-card-text>
                <v-card-text
            class="white--text text-center pa-0 mt-md-2 mt-lg-2 body-font px-10 mx-auto herocontainer-max-width-635 ls-n10"
            v-html="heroData.content"
          ></v-card-text>
            </v-card>
          </div>
        </v-img>
      </v-card>-->
      <!-------------------------------------------------------------------------------------->
    </div>
  </div>
</template>

<script>
// import NavigationBar from "./NavigationBar";
import { createHelpers } from "vuex-map-fields";
import {
  customAttributeValue,
  getCategoryOne,
  goToCategoryPageRouting
} from "@/services/util.service";

const { mapFields } = createHelpers({
  getterType: "layout/getField",
  mutationType: "layout/updateField"
});

export default {
  name: "HeroContainer",
  props: ["heroData"],
  components: {},

  data: () => ({
    offsetTop: 0,
    showMenu: false,
    staticPages: [
      "AboutUs",
      "EtiquetteGuide",
      "PrintingProcesses",
      "OurPapers",
      "ShippingAndDelivery"
    ],
    rightBackgroundColor: null,
    leftBackgroundColor: null
  }),
  computed: {
    ...mapFields(["user", "user.userVisits"]),

    inProgress: function() {
      return this.$store.state.layout.inProgress;
    },
    heroContent() {
      return this.$store.state.layout.heroContent;
    },
    heroBlock: function() {
      return this.$store.state.block.heroBlock;
    },
     categoryDetailsList: function() {
      return this.$store.state.headerCategoryList.categoryDetails;
    }
  },
  methods: {
    initialLink() {
      return process.env.VUE_APP_HOME_PAGE_URL;
    },
    async goToPage(main,sub,child,categoryId) {
       let categoryOne = await getCategoryOne(
        this.categoryDetailsList,
        categoryId
      );
        let vm = this;
       goToCategoryPageRouting(vm, categoryOne);
    
    },
    imageBasePathUrl() {
      return process.env.VUE_APP_IMAGE_CATEGORY_PATH_URL;
    },
    getBlockId() {
      if (this.pageName() == "FaqPage") {
        return 11;
      }
    },
    /* getBlockContent() {
     let path = this.callOutsBlock.content;
      var div = document.createElement("div");
      div.innerHTML = path;
      let imgSrcUrls = div.getElementsByTagName("img");
      for (let i = 0; i < imgSrcUrls.length; i++) {
        let urlValue = imgSrcUrls[i].getAttribute("src");
        if (urlValue) {
          imgSrcUrls[i].setAttribute(
            "src",

            this.imageBasePathUrl() +
              "/media/" +
              imgSrcUrls[i].src
                .replace(window.location.href, "")
                .replace(window.location.origin, "")
                .replace(/%22%7D%7D/g, "")
                .replace(/%7B%7B/g, "")
                .replace(/%20url=%22/g, "")
                .replace("media", "")
          );
        }
      }
      return div.innerHTML;
    },*/

    getCustomAttributeValue(customAttributes, attributeCode) {
      return customAttributeValue(customAttributes, attributeCode);
    },
    getImageCustomAttributeValue(customAttributes, attributeCode) {
      let imagePath = customAttributeValue(customAttributes, attributeCode);
      /* eslint-disable */
      if (imagePath == "") {
        return undefined;
      } else if (imagePath.includes("/media/catalog/category/")) {
        return this.imageBasePathUrl() + imagePath;
      } else if (!imagePath.includes("/media/catalog/category/")) {
        return this.imageBasePathUrl() + "/media/catalog/category/" + imagePath;
      } else {
        return this.heroData.image;
      }
    },
    pageName() {
      return this.$route.name;
    },
    checkStaticPage() {
      let currentPage = this.$route.name;
      if (this.staticPages.indexOf(currentPage) == -1) return false;
      else return true;
    },
    pageBackgroundColor() {
      let currentPage = this.$route.name;
     /* if (currentPage == "OurPapers") {
        return (
          (this.rightBackgroundColor = "background-monarch fontcolor-cloud") &&
          (this.leftBackgroundColor = "background-cloud fontcolor-monarch")
        );
      }*/ /*else if (currentPage == "AboutUs") {
        return (
          (this.rightBackgroundColor = "primary fontcolor-mauve") &&
          (this.leftBackgroundColor = "background-mauve primary--text")
        );
      }*//*else if (currentPage == "PrintingProcesses") {
        return (
          (this.rightBackgroundColor = "background-lapis  white--text") &&
          (this.leftBackgroundColor =
            "light-pink-bancground fontcolor-lapis  d-none d-sm-block")
        );
      }*/ /*if (currentPage == "EtiquetteGuide") {
        return (
          (this.rightBackgroundColor = "background-bordeaux fontcolor-ecru") &&
          (this.leftBackgroundColor = "background-ecru fontcolor-bordeaux")
        );
      }  */ if (currentPage == "ShippingAndDeliveryCms") {
        return (
          (this.rightBackgroundColor = "primary fontcolor-mauve") &&
          (this.leftBackgroundColor = "background-mauve primary--text")
        );
      }
    },
    routeToPage(pageName) {
      if (pageName == "CategoryPage") {
        let vm = this;
        goToCategoryPageRouting(vm,{n:"Stationery",id:10});
      }
    }
  },
  created() {
    //this.$store.dispatch("block/fetchHeroBlock", this.getBlockId());
  }
};
</script>
<style  src="./HeroContainer.scss" lang="scss">
</style>