import React, { useState, useRef } from 'react';
import {DropdownSelect} from 'src/components';
import {HeaderNavProps} from 'src/interfaces';
import {LANGUAGE_OPTIONS} from 'constants/languages';
import {
  MobileMenuWrapper,
  MobileIcon,
  MobileMenuList,
  MobileSubMenu,
  MenuLink,
  MenuLinks,
  MobileButtonContainer,
  NestedMenu,
  MenuParentLink,
} from './styles';
import CallButton from '../callButton';
//import TagManager from 'react-gtm-module';

interface MobileMenuProps {
  nav: HeaderNavProps[];
  callNumber: string;
  callNumberText: string;
  handleLanguageChange: (arg0: any) => void;
}

export const MobileMenu: React.FC<MobileMenuProps> = ({
  nav,
  handleLanguageChange,
  callNumber,
  callNumberText,
}): JSX.Element => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  const wrapperRef = useRef(null);

  const toggleMenu = () => {
    setIsMenuOpen(prevState => !prevState);
  };

  const toggleDropdown = () => {
    setIsDropdownOpen(prev => !prev);
  };

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


  const menuList = (nav: HeaderNavProps[]) => {
    return (
      <MobileMenuList isMenuOpen={isMenuOpen}>
        <MenuLinks>
          <MobileButtonContainer>
            <CallButton callNumber={callNumber} callNumberText={callNumberText} data-click-category="phone" data-click-action="Call" data-click-label={callNumberText} />
            <DropdownSelect defaultValue="English" handleSelectChange={handleLanguageChange} items={LANGUAGE_OPTIONS} />
          </MobileButtonContainer>
          {nav.map(({node}: HeaderNavProps) => {
            const subMenu = node?.childItems.edges;
            return subMenu.length ? (
              <NestedMenu key={`${node.label} - ${Math.random()}`}>
                <MenuParentLink className={isDropdownOpen ? 'drop-open' : 'drop-closed'} onClick={toggleDropdown}>{node.label}</MenuParentLink>
                <MobileSubMenu className={isDropdownOpen ? 'drop-open' : 'drop-closed'}>
                  {subMenu.map(({node}: HeaderNavProps) => {
                    return (
                      <MenuLink key={`${node.label} - ${Math.random()}`} onClick={() => clickLink()} href={node.url}>
                        {node.label}
                      </MenuLink>
                    );
                  })}
                </MobileSubMenu>
              </NestedMenu>
            ) : (
              <MenuLink key={`${node.label} - ${Math.random()}`} onClick={() => clickLink()} href={node.url}>
                {node.label}
              </MenuLink>
            );
          })}
        </MenuLinks>
      </MobileMenuList>
    );
  };

  return (
    <MobileMenuWrapper ref={wrapperRef}>
      <MobileIcon
        src={isMenuOpen ? '/images/icons/mobile-close.svg' : '/images/icons/mobile-hamburger.svg'}
        onClick={toggleMenu}
      />
      {menuList(nav)}
    </MobileMenuWrapper>
  );
};

export default MobileMenu;