// NavBar.tsx
import React, { useState } from 'react';
import { RoutesEnums } from '../../enums/RoutesEnums';
import { MdLanguage } from 'react-icons/md';
import { FaEllipsis } from 'react-icons/fa6';
import { Popover } from 'antd';
import { navBar as navBarData, Setting } from '../../../data.json';
// Define an enum for the routes

// Define a type for the link objects
interface NavLink {
  path: RoutesEnums;
  label: string;
}

const NavBar: React.FC = () => {
  // Define an array of link objects using the RoutesEnums
  const links: NavLink[] = [
    { path: RoutesEnums.HOME, label: navBarData.link1 },
    { path: RoutesEnums.FEATURES, label: navBarData.link2 },
    { path: RoutesEnums.HOW_IT_WORK, label: navBarData.link3 },
    { path: RoutesEnums.SCREEN_SHOOT, label: navBarData.link4 },
    { path: RoutesEnums.NOTE, label: navBarData.link5 },
    { path: RoutesEnums.CONTACT, label: navBarData.link6 },
  ];
  const [Open, setOpen] = useState(false);
  const handleToggle = () => {
    setOpen(!Open);
  };

  const NavBarContent = (
    <div className="NavBarContent">
      <ul className="NavBarLinks">
        {links.map((link) => {
          return (
            <li
              onClick={handleToggle}
              key={link.path}
              className={`${'activeLink'}`}
            >
              <a href={link.path}>{link.label}</a>
            </li>
          );
        })}
      </ul>
    </div>
  );

  const [Active, setActive] = useState(location.hash);

  return (
    <nav className="NavBar">
      <img loading="lazy" src={Setting.Logo} className="scale" alt="" />
      <ul className="NavBarLinks">
        {links.map((link) => {
          const handleClick = () => {
            setActive(link.path);
          };
          const isActive =
            Active === '' && link.path === '#' ? true : Active === link.path;
          return (
            <li
              key={link.path}
              onClick={handleClick}
              className={`${isActive ? 'activeLink' : ''}`}
            >
              <a href={link.path}>{link.label}</a>
            </li>
          );
        })}
      </ul>

      <div>
        <MdLanguage />
        <article>
          <Popover open={Open} content={NavBarContent}>
            <FaEllipsis onClick={handleToggle} />
          </Popover>
        </article>
      </div>
    </nav>
  );
};

export default NavBar;