text: import Layout from '../../src/components/Layout';
  import { useRouter } from 'next/router';
  import clients from '../../src/components/ApolloClient';
  import {PRODUCT_BY_SLUG_QUERY, PRODUCT_SLUGS} from '../../src/queries/product-by-slug';
  import {MAP_PRODUCTS_DATA_QUERY} from '../../src/queries/map-products-data';
  import { isEmpty } from 'lodash';
  import StockProduct from '../../src/components/single-product/StockProduct';
  import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
  import MapProduct from '../../src/components/single-product/MapProduct/MapProduct';
  import { getMenuData, getSeoData } from '../../src/functions';
  import { useEffect } from 'react';
  import { triggerViewContentEvent } from '../../src/events/executors';
  import Seo from '../../src/components/seo/Seo';
  import { useTranslation } from 'next-i18next';
  
  export default function Product(props) {
  	const { product, isMapProduct, mapProductsData, seoData } = props;
      const router = useRouter()
      const { t } = useTranslation('common');
  
      useEffect(() => {
          if (!t('currency')) return;
          triggerViewContentEvent(product.price, t('currency'), product.name, product.productId);
      }, [product, t]);
  
  	return isMapProduct ? (
              <Layout menuData={props.menuData} header={true} footer={false} >
                  <Seo seoData={seoData} />
                  <MapProduct product={product} mapProductsData={mapProductsData}/>
              </Layout>) 
          : ( product ? (
              <Layout menuData={props.menuData} header={true} footer={true} >
                  <Seo seoData={seoData} />
                  <StockProduct product={product}/>
              </Layout>
          ) :
              ''
          )
  };
  
  
  export async function getStaticProps(context) {
      const {params: { slug }, locale} = context
  
      const seoData = await getSeoData(clients[locale], '/product/' + slug);
  
      const {data} = await clients[locale].query({
          query: PRODUCT_BY_SLUG_QUERY,
          variables: { slug }
      })
  
      const isMapProduct = data?.product?.metaData.filter(metaItem => metaItem.key === "is_map_product");
      const isMapProductBool = isMapProduct.length === 1 && isMapProduct[0].value === "yes";
  
      const menuData = await getMenuData(locale);
      
      // Default Props
      let props = {
          product: data?.product,
          menuData,
          seoData,
          isMapProduct: false,
          ...(await serverSideTranslations(locale, ['common', 'cart']))
      };
  
      // Props when isMapProduct
      if (isMapProductBool){
          const mapProductsResp = await clients[locale].query({
              query: MAP_PRODUCTS_DATA_QUERY
          });
          const mapProductsData = mapProductsResp.data;
  
          const keyMapping = {
              "mapFonts": "fonts",
              "mapIcons": "icons",
              "mapOverlays": "map_overlays",
              "mapSizes": "sizes",
              "mapThemes": "themes",
          }
  
          const filteredMapProductsData = {
              mapOverlayColors: mapProductsData.mapOverlayColors,
              mapPinColors: mapProductsData.mapPinColors,
          };
  
          for (const key in keyMapping) {
              if (Object.hasOwnProperty.call(keyMapping, key)) {
                  const keyMap = keyMapping[key];
                  const metaDataItem = data?.product?.metaData.filter(metaItem => metaItem.key === keyMap)[0];
                  const idList = metaDataItem.value.split(",");
                  filteredMapProductsData[key] = mapProductsData[key].filter(entry => idList.includes(entry.id.toString()));
              }
          }
          props = {
              key: data?.product.id,
              product: data?.product,
              isMapProduct: true,
              menuData,
              seoData,
              ...(await serverSideTranslations(locale, ['mapproduct', 'common', 'cart'])),
              mapProductsData: filteredMapProductsData,
          }
      }
  
      return {
          props: props,
      };
  }
  
  export async function getStaticPaths ({locales}) {
      const pathsData = []
      for (let index = 0; index < locales.length; index++) {
          const locale = locales[index];
          const { data } = await clients[locale].query({
              query: PRODUCT_SLUGS
          })
      
          data?.products?.nodes && data?.products?.nodes.map((product) => {
              if (!isEmpty(product?.slug)) {
                  pathsData.push({ 
                      params: {
                          slug: product?.slug
                      },
                      locale
                  })
              }
          })
      }
  
      return {
          paths: pathsData,
          fallback: true
      }
  }
  