import React, { useEffect, useContext } from 'react';
import { FrontendContext } from '../App/FrontendContext';

const MenuIconAppender = () => {
  const { settings, isPro } = useContext(FrontendContext);
  const { referralMenuName } = settings;

  function convertToSlug(text) {
    if (typeof text !== 'string') {
      return '';
    }
    return text
      .toLowerCase()
      .replace(/ /g, '-');
  }

  useEffect(() => {
    const appendMenuIcon = () => {
      const menuClassName = `.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--${convertToSlug(referralMenuName)} a`;
      const menuElement = document.querySelector(menuClassName);

      if (menuElement) {
        if (!isPro || (isPro && !settings.hideReferralMenuIcon)) {

          if (settings.referralMenuIcon) {
            // If referralMenuIcon is set, append the image
            if (!menuElement.querySelector('img.menu-icon')) {
              const imgElement = document.createElement('img');
              imgElement.className = 'menu-icon';
              imgElement.src = settings.referralMenuIcon;
  
              imgElement.style.height = '25px';
              imgElement.style.width = '25px';
              imgElement.style.marginLeft = '5px';
              menuElement.style.display = 'flex';
              menuElement.appendChild(imgElement);
            }
          } else {
            // If referralMenuIcon is not set, append the SVG
            if (!menuElement.querySelector('svg.menu-icon')) {
              const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
              svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
              svgElement.setAttribute('width', '24');
              svgElement.setAttribute('height', '24');
              svgElement.setAttribute('viewBox', '0 0 24 24');
              svgElement.setAttribute('fill', 'none');
              svgElement.setAttribute('class', 'menu-icon'); // Use setAttribute instead of className
  
              svgElement.innerHTML = `
                <path class="ecre-transition" d="M21 11.25V19.5C21 20.3284 20.3284 21 19.5 21H5.25C4.42157 21 3.75 20.3284 3.75 19.5V11.25M12 4.875C12 3.42525 10.8247 2.25 9.375 2.25C7.92525 2.25 6.75 3.42525 6.75 4.875C6.75 6.32475 7.92525 7.5 9.375 7.5C10.1095 7.5 12 7.5 12 7.5M12 4.875C12 5.59024 12 7.5 12 7.5M12 4.875C12 3.42525 13.1753 2.25 14.625 2.25C16.0747 2.25 17.25 3.42525 17.25 4.875C17.25 6.32475 16.0747 7.5 14.625 7.5C13.8905 7.5 12 7.5 12 7.5M12 7.5V21M3.375 11.25H21.375C21.9963 11.25 22.5 10.7463 22.5 10.125V8.625C22.5 8.00368 21.9963 7.5 21.375 7.5H3.375C2.75368 7.5 2.25 8.00368 2.25 8.625V10.125C2.25 10.7463 2.75368 11.25 3.375 11.25Z" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              `;
  
              svgElement.style.height = '25px';
              svgElement.style.width = '25px';
              svgElement.style.marginLeft = '5px';
              menuElement.style.display = 'flex';
              menuElement.appendChild(svgElement);
            }
          }

        }
       
      }
    };

    const accountNavigationElement = document.querySelector('.woocommerce-MyAccount-navigation');
    if (accountNavigationElement) {
      appendMenuIcon();
    }
  }, [settings]);

  return null;
};

export default MenuIconAppender;