/* eslint-disable jsx-a11y/anchor-is-valid */

import React, { useMemo, useState } from 'react';
import { SideNavbarSlots, SlotsToClasses, sideNavbar } from '@trail-ui/theme';
import { MenuCollapsedIcon, MenuExpandedIcon } from '@trail-ui/icons';

export interface SideNavbarItem {
  title: string;
  icon: JSX.Element;
}
export interface SideNavbarProps {
  data: SideNavbarItem[];
  classNames?: SlotsToClasses<SideNavbarSlots>;
}

function SideNavbar({ data, classNames }: SideNavbarProps) {
  const slots = useMemo(() => sideNavbar(), []);

  const [isExpanded, setIsExpanded] = useState(true);
  const [activeButtonIndex, setActiveButtonIndex] = useState(0);

  const handleSidebar = () => {
    setIsExpanded(!isExpanded);
  };

  return (
    <div
      role="navigation"
      aria-label="Primary"
      className={`${slots.base({ class: classNames?.base })} ${isExpanded ? slots.expanded({ class: classNames?.expanded }) : slots.collapsed({ class: classNames?.collapsed })}`}
    >
      <button
        type="button"
        className={slots.heading({ class: classNames?.heading })}
        aria-label={isExpanded ? 'Icon View' : 'Detail View'}
        onClick={handleSidebar}
      >
        <div>
          {isExpanded ? (
            <MenuCollapsedIcon width={24} height={24} />
          ) : (
            <MenuExpandedIcon width={24} height={24} />
          )}
        </div>
      </button>

      <ul>
        {data.map((item, index) => (
          <li key={index}>
            <a
              key={index}
              href="#"
              className={`w-full cursor-pointer px-2 py-2 pl-4 ${slots.labelElement({ class: classNames?.labelElement })} ${activeButtonIndex === index && slots.active({ class: classNames?.active })}`}
              onClick={() => setActiveButtonIndex(index)}
              aria-current={activeButtonIndex === index ? 'page' : undefined}
            >
              <div className="flex items-center gap-2">
                <div>{item.icon}</div>
                <div className="flex flex-col">
                  <p className={`${!isExpanded ? 'sr-only' : ''}`}>{item.title}</p>
                </div>
              </div>
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

export { SideNavbar };