import React from 'react';
import {HeaderNavProps} from 'src/interfaces';
import {NavWrapper, MenuLink, NestedMenu, NestedMenuWrapper} from './styles';
import { isAbsoluteUrl } from 'src/components/core/link/link';
//import TagManager from 'react-gtm-module';

interface NavProps {
  nav: HeaderNavProps[];
}

export const HeaderNav: React.FC<NavProps> = ({nav}): JSX.Element => {

  const clickLink = () => {
    /*
    TagManager.dataLayer({
      dataLayer: {
        'event': 'ce_navigationClick', 
        'menuType': 'header', 
        'menuItemName': menuItemName
      }
    });
    */
  }

  return (
    <NavWrapper>
      {nav.map(({node}: HeaderNavProps) => {
        const subMenu = node?.childItems.edges;
        const hasSubMenu = subMenu && subMenu.length;

        return hasSubMenu ? (
          <NestedMenuWrapper key={`${node.label} - ${Math.random()}`}>
            <MenuLink href={node.url}>{node.label}</MenuLink>
            <NestedMenu>
              {subMenu.map(({node}: HeaderNavProps) => {
                return (
                  <MenuLink
                    key={`${node.label} - ${Math.random()}`}
                    href={node.url}
                    onClick={() => clickLink()}
                    target={isAbsoluteUrl(node.url) ? '_blank' : ''}
                  >
                    {node.label}
                  </MenuLink>
                );
              })}
            </NestedMenu>
          </NestedMenuWrapper>
        ) : (
          <MenuLink key={`${node.label} - ${Math.random()}`} onClick={() => clickLink()} href={node.url}>
            {node.label}
          </MenuLink>
        );
      })}
    </NavWrapper>
  );
};

export default HeaderNav;