<template>
   
  <div class="drawer"
       :class="{ 'drawer--active': isDrawerActive }">
    <div class="drawer__header">
      <i class="icon-clear drawer__close-btn"
         @click="$emit('close')" />
      <logo-link />
    </div>
    <div class="drawer__body">
      <navigation-item :link="homePageLink"
                       :subLinks="[]" />
      <productCategoriesSubMen />
      <navigation-item v-for="link in commonPagesLink"
                       :key="link.name"
                       :link="link"
                       :subLinks="[]" />
      <navigation-item
                       :link="catalogMenuItem"
                       :subLinks="[]"
                       tag-type="a"
                       :is-catalog="true"
                       :isLocalizeLinkUrl="false" />
    </div>
    <div class="drawer__footer">
      <a :href="'tel:' + supportPhoneLink"
         class="drawer__call-btn">
        {{ supportPhone }}
        <i class="icon-support drawer__call-btn__icon" />
      </a>
      <a :href="$t('contactLinkdin')"
         class="drawer__social-link">
        <i class="icon-linkedin" />
      </a>
      <a :href="$t('contactYoutube')"
         class="drawer__social-link">
        <i class="icon-youtube" />
      </a>
      <a :href="$t('contactTelegramLink')"
         class="drawer__social-link">
        <i class="icon-telegram" />
      </a>
      <a :href="$t('contactInstagramLink')"
         class="drawer__social-link">
        <i class="icon-instagram" />
      </a>
    </div>
  </div>
 
</template>
<script>
import logoLink from "./navigation_logo_link";
import navigationItem from "./navigation_item";
import productCategoriesSubMen from "./navigation_product_categories";
import LazyHydrate from "vue-lazy-hydration";

export default {
  name: "MenuDrawer",
  components: {
    logoLink,
    navigationItem,
    productCategoriesSubMen,
    LazyHydrate
  },
  computed: {
    instagramLink() {
      return this.$t("contactInstagramLink");
    },
    homePageLink() {
      return {
        "name": "Home Page",
        "showName": "home",
        "url": "/",
        "parent": null,
        "order": 1,
        "visible": true
      };
    },
    catalogMenuItem() {
        const isEn = this.$i18n?.locale == "en";
      const faCatalog = "https://panel.parsmega.com/wp-content/uploads/2024/09/Parsmega-Products-Catalouge.pdf";
      const enCatalog = "https://enpanel.parsmega.com/wp-content/uploads/2025/08/en-parsmega-products-catalog.pdf";
       const catalogUrl = isEn ? enCatalog : faCatalog;

         return {
          "name": "Catalog",
          "showName": "downloadCatalog",
          "url": catalogUrl,
          "parent": null,
          "order": 80,
          "visible": true
        }
    },
    commonPagesLink() {
    

      return [
        {
          "name": "blog",
          "showName": "articles",
          "url": "/articles",
          "parent": null,
          "order": 30,
          "visible": true
        },
        {
          "name": "Contact Us",
          "showName": "contact-us",
          "url": "/contact-us",
          "parent": null,
          "order": 50,
          "visible": true
        },
        {
          "name": "About Us",
          "showName": "about-us",
          "url": "/about-us",
          "parent": null,
          "order": 60,
          "visible": true
        },
        {
          "name": "Agents",
          "showName": "agents",
          "url": "/agents",
          "parent": null,
          "order": 70,
          "visible": true
        },
     
      ];
    },
    supportPhone() {
      return this.$t("contactSupportPhoneValue");
    },
    supportPhoneLink() {
      return this.$t("contactSupportPhonePureValue");
    },
    telegramLink() {
      return this.$t("contactTelegramLink");
    },
    twitterLink() {
      return this.$t("contactTwitterLink");
    },
  },
  props: {
    isDrawerActive: {
      default: false,
      required: true,
      type: Boolean,
    },
  }
};
</script>
<style lang="scss" scoped>
.drawer {
  $footer: 120px;
  $header: $menu-bar-height;

  background: $color-white;
  bottom: 0;
  content-visibility: auto;
  display: inline-block;
  height: 100%;
  height: 100vh;
  left: 0;
  opacity: 0;
  overflow: hidden;
  padding: $header $padding-default (
    $footer + 32px) $padding-default;
  position: fixed;
  right: 0;
  top: $contact-bar-height;
  transform: translateX(100%
  );
transition: all ease-in-out 0.2s;
vertical-align: middle;
width: 100%;
z-index: $navigation-bar-z-index + 1;

&--active {
  opacity: 1;
  transform: translateX(0);
}

&__header {
  background: $color-white;
  height: $header;
  line-height: $header;
  padding: 0 $padding-default;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
}

&__close-btn {
  display: inline-block;
  font-size: 32px;
  margin-left: $padding-default/2;
  vertical-align: middle;
}

&__body {
  height: 100%;
  overflow-y: auto;
}

&__footer {
  background: $color-white;
  bottom: 16px;
  height: $footer;
  line-height: 1;
  padding: 10px $padding-default;
  position: fixed;
  right: 0;
  text-align: center;
  width: 100%;
}

&__call-btn {
  $height: 32px;

  background: $color-accent;
  border-radius: $border-radius;
  color: $color-white;
  display: block;
  direction: ltr;
  font-weight: bold;
  height: $height;
  line-height: $height;
  margin: 0 auto $padding-default * 1.5 auto;
  max-width: 200px;
  padding: 0 $padding-default;
  text-align: center;
  text-decoration: none;

  &__icon {
    display: inline-block;
    font-size: 22px;
    margin-right: $padding-default/2;
    vertical-align: middle;
  }
}

&__social-link {
  color: $color-accent;
  display: inline-block;
  font-size: 18px;
  margin: 0 $padding-default;
  text-decoration: none;
  vertical-align: middle;
}



@media (min-width: $desktop) {
  bottom: auto;
  content-visibility: unset;
  height: $menu-bar-height;
  font-weight: bold;
  line-height: $menu-bar-height;
  left: auto;
  opacity: 1;
  overflow: visible;
  padding: 0;
  padding-right: $padding-default*2;
  position: relative;
  right: auto;
  top: auto;
  transform: none;
  transition: none;
  width: calc(100% - 210px);
  z-index: inherit;

  &__header,
  &__footer {
    display: none;
  }

  &__body {
    overflow: visible;
  }

}
}

[data-lang="en"] {
  .drawer {
    &__close-btn {
      margin-left: 0;
      margin-right: $padding-default/2;
    }

    &__call-btn__icon {
      margin-left: $padding-default/2;
      margin-right: 0;
    }

    &__language-link {

      &--fa {
        display: block;
      }

      &--en {
        display: none;
      }
    }

    @media (min-width: $desktop) {
      padding-left: $padding-default*2;
      padding-right: 0;

    }
  }
}
</style>